За последние 24 часа нас посетили 16992 программиста и 1628 роботов. Сейчас ищут 1678 программистов ...

перезапись таблицы аяксом

Тема в разделе "JavaScript и AJAX", создана пользователем Taktreba, 29 янв 2018.

  1. Taktreba

    Taktreba Активный пользователь

    С нами с:
    11 янв 2017
    Сообщения:
    543
    Симпатии:
    132
    мне помощь нужна чет застрял пол дня мучаюсь уже

    есть форма ТАБЛИЦА с значениями , хочу что бы была кнопка перезаписи полей, то есть некоторые TD это input и которые можно изменить и в sql записать и если перезагрузить страницу то динамически создастся таблица с измененными значениями

    PHP:
    1. <table>
    2.     <tr>
    3.         <th></th>
    4.         <th></th>
    5.         <th></th>
    6.     </tr>
    7.     <tr>
    8.         <td>id</td>
    9.         <td>name</td>
    10.         <td>description</td>
    11.     </tr>
    12.     <tr>
    13.         <td>id</td>
    14.         <td>name</td>
    15.         <td>description</td>
    16.     </tr>
    17. </table>
    и что бы все это отправить в рнр файл для перезаписи в sql мне нужен такой обьект

    Код (Javascript):
    1. data = {
    2.    {
    3.        id: 1,
    4.        name: name,
    5.        description: description
    6.    },
    7.    }
    8.        id: 2,
    9.        name: name,
    10.        description: description
    11.    },
    12. }
    при этом в data передавать только те поля которые изменились
    (тут я думаю сделать так
    Код (Javascript):
    1. if ($(this).data('value') !== $(this).val())
    )

    проблема в том что я не могу понять как пушить в обьект
    и не могу добраться до инпутов

    Код (Javascript):
    1. $('#' + idForm).find('tr');
    нахожу обьект TRок а дальше не получается
     
    #1 Taktreba, 29 янв 2018
    Последнее редактирование модератором: 30 янв 2018
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.861
    Симпатии:
    751
    Адрес:
    Татарстан
    По вашей таблице инпутов то и нету, как вы собираетесь добираться до того чего нет?

    а так вообще обычно такие вещи аяксовово делают
    типа есть у вас где-то <input data-id="3"> , грубо говоря на все инпуты вешается обработчик отслеживающий изменение, при изменении шлет аякс запрос с новым значением ячейки, ид берем из атрибута data-id например... все..... никаких перезагрузок страницы не нужно!
     
  3. Taktreba

    Taktreba Активный пользователь

    С нами с:
    11 янв 2017
    Сообщения:
    543
    Симпатии:
    132
    да то я не стал засорять код, сама таблица в форме, а в TD есть инпуты


    это типо keyup? это на каждое изменение будет запрос, а меня есть кнопка, которая собирает все измененные поля формируется в объект и шлет на сохранение ( по крайней мере так планируется ))),
    есть еще идеи как помочь мне?
    --- Добавлено ---
    так я создаю tbody, напихал этих data-velue куда только можно пока придумывал как сделать, но пока не получилсоь

    Код (Javascript):
    1. stringData += "<tr data-id='" + response[idx]['id'] + "'>" +
    2.                         "<td>" + response[idx]['id'] + "</td>" +
    3.                         "<td><input id = 'name_"+response[idx]['id']+"' type='text' data-name='name' data-value='" + response[idx]['name'] + "' value='" + response[idx]['name'] + "' title='" + response[idx]['name'] + "'></td>" +
    4.                         "<td><input id = 'enable_"+response[idx]['id']+"' type='checkbox' data-name='enable' checked data-isCheck='" + response[idx]['enable'] + "'></td>" +
    5.                         "<td><input id = 'description_"+response[idx]['id']+"' type='text' data-name='description' value='" + response[idx]['description'] + "' data-value='" + response[idx]['description'] + "' title='" + response[idx]['description'] + "'></td>" +
    6.                         "</tr>";
    --- Добавлено ---
    мне кажется мне нужно сделать два цикла первый перебирает TR в форме и делает -
    Код (Javascript):
    1. data = {
    2.    1: {}
    3. }
    , а второй перебирает TD в TR и делает так
    Код (Javascript):
    1. data = {
    2.    1: {
    3. id: id,
    4. name: name,
    5. description: description
    6. }
    7. }
    и TR может быть много
     
    #3 Taktreba, 29 янв 2018
    Последнее редактирование модератором: 30 янв 2018
  4. voral

    voral Активный пользователь

    С нами с:
    30 ноя 2017
    Сообщения:
    646
    Симпатии:
    104
    Обходите его простым циклом или each. Внутри собираете текст из td
    Код (Javascript):
    1. var result = [];
    2. arTr.each(function(idx,el){
    3.    var elm=$(el),data={};
    4.    elm.find('tr').each(function(id,elem){
    5.       if (id==0) data.id = $(elem).text()
    6.       else if (id==1) data.name = $(elem).text();
    7.       else if (id==2) data.description = $(elem).text();
    8.    });
    9.   result.push(data);
    10. });
    --- Добавлено ---
    тогда даже легче
     
  5. MRSgiba

    MRSgiba Активный пользователь

    С нами с:
    22 дек 2017
    Сообщения:
    200
    Симпатии:
    32
    есть еще идеи как помочь мне?
    есть x-editable, есть на ГИТе
     
  6. voral

    voral Активный пользователь

    С нами с:
    30 ноя 2017
    Сообщения:
    646
    Симпатии:
    104
    Правда массив придет в иной форме чем надо, его лучше там и склеить как надо... Ну, или в этом JS скрипте перекомпоновать
    HTML:
    1. <form id="test">
    2.   <tr><td><input name="id[]"></td><td><input name="name[]"></td><input name="desciption[]"></td></tr>
    3.   <tr><td><input name="id[]"></td><td><input name="name[]"></td><input name="desciption[]"></td></tr>
    4. </form>
    5. $(doument).ready(function(){
    6.   $('#test').submit(function(){
    7.      $.ajax({
    8.         url:'script.php',
    9.         data:$(this).serializeArray(),
    10.         .........
    11.       });
    12.      return false;
    13.   });
    14. });
    15.