Как получить значение поля ввода заполненного текста в столбце таблицы данных - PullRequest
Новая
       6

Как получить значение поля ввода заполненного текста в столбце таблицы данных

0 голосов
/ 11 декабря 2018

У меня есть таблица данных, в которой я заполняю текстовые поля в столбце для каждой строки.Я пытался получить значение из этих текстовых полей, но оно всегда принимает значение текстового поля первого столбца, поскольку, как я предполагаю, идентификатор всегда одинаков для каждого заполненного текстового поля.Как я могу решить эту проблему?Нужно ли также заполнять имена динамических идентификаторов для каждого текстового поля?Между прочим, я получаю значение с помощью jQuery.

С этим фрагментом кода: 

var qty = $("#input").val();

И я собираюсь отправить эту переменную "qty" в код php через Ajaxвызов.Ajax-вызов работает нормально, отправляя переменную, я проверил это, поэтому это не проблема.

Код объявления таблицы: 

var table3 =  $("#last3").DataTable({

                                    "columnDefs": [
                                {
                                "targets": 4,
                                "data": null,
                                "defaultContent": '<input id="input" type="number"  value="" min="1" max="9"></input>'
                                },

                                {
                                "targets": 3,
                                "data": null,
                                "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
                                },

                                { "searchable": false, "targets": 0 } ],

                                select:false,

                                "scrollY": "32vh",
                                "scrollCollapse": true,
                                "paging": false,
                            });

РЕДАКТИРОВАТЬ 1: У меня есть этот кусок кода,это динамически создает значение ячейки и увеличивает его на единицу, поэтому в основном создает столбец индекса.Мне просто интересно, есть ли способ изменить это так, чтобы вместо заполнения cell.innerhtml как-то заполнялся атрибут «id».таким образом, у меня будет уникальный идентификатор attr для каждого текстового поля.(хотя не обязательно должен быть id, я также могу получить значение по имени name) 

table3.column(4, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {cell.innerHTML = i+1;}

1 Ответ

0 голосов
/ 12 декабря 2018

Вам нужно привязать кнопку add после отрисовки таблицы из-за подкачки, поиска и т. Д. И, как я уже говорил в комментариях, внутри вашего итератора у вас есть параметр ячейки, вы можете искать внутри него, чтобы найти входные данные, а затем обработатьс этим.

Может быть, это поможет вам: 

$(document).ready(function() {


  var table3 = $("#last3").DataTable({

    "columnDefs": [{
        "targets": 4,
        "data": null,
        "defaultContent": '<input id="input" type="number" class="table-input"  value="" min="1" max="9"></input>'
      },

      {
        "targets": 3,
        "data": null,
        "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
      },

      {
        "searchable": false,
        "targets": 0
      }
    ],

    select: false,

    "scrollY": "32vh",
    "scrollCollapse": true,
    "paging": false,
  }).on('draw.dt', function() {
    $("#last3 tr").on("click", ".btn-add", function() {
      var data = table3.DataTable().row($(this).closest('tr')).data();
      console.log(data);
    })
  });


  table3.column(4, {
    search: 'applied',
    order: 'applied'
  }).nodes().each(function(cell, i) {
    var $input = $(cell).find('input');
    $input.attr({
      'id': ($input.attr('id') + i),
      'value': i
    });
  }).draw();;

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>



<table id="last3" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
      <td>Row 1 Data 4</td>
      <td>Row 1 Data 5</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
      <td>Row 2 Data 4</td>
      <td>Row 2 Data 5</td>
    </tr>
    <tr>
      <td>Row 3 Data 1</td>
      <td>Row 3 Data 2</td>
      <td>Row 3 Data 3</td>
      <td>Row 3 Data 4</td>
      <td>Row 3 Data 5</td>
    </tr>
    <tr>
      <td>Row 4 Data 1</td>
      <td>Row 4 Data 2</td>
      <td>Row 4 Data 3</td>
      <td>Row 4 Data 4</td>
      <td>Row 4 Data 5</td>
    </tr>
  </tbody>
</table>
...