Как получить значение текста из инпута в конкретной ячейке таблицы?

Question

[xibolba]

При клике на кнопку не могу получить текст с инпута в "count"
Таблица генерируется Datatables.

<tbody>
  <tr id="27" class="odd">
    <td>Andrew</td>
    <td><a href="http://abw.by/">Ruby</a></td>
    <td>9300000</td><td>300</td>
    <td><div class="number" data-step="1" data-min="1" data-max="100">
      <input class="number-text" type="text" name="count" value="1">
      <a href="#" class="number-minus">−</a>
      <a href="#" class="number-plus">+</a>
   </div></td><td><button>Click!</button></td>
  </tr>
</tbody>

$(document).ready(function () {
        var table = $('#users_table').DataTable({
            responsive: true,
            search: {return: true},
            dom: '<"top"fl<"clear"><"ec_buttons">>rt<"bottom"ip<"clear">>',
            order: [],
            orderCellsTop: true,
            deferRender: true,
            processing: true,
            serverSide: true,
            ajax: $.fn.dataTable.pipeline({
                url: urls['data_url'],
                type: 'GET',
                contentType: 'application/json',
                pages: 5   // Number of cache pages
            }),
            columns: [
                {data: "name"},
                {data: "code"},
                {data: "description"},
                {data: "cost"},
                {data: null, orderable: false, defaultContent: '', targets: -2},
                {data: null, orderable: false, defaultContent: '<button>Click!</button>', targets: -1},

            ],
            createdRow: function (row, data, dataIndex) {
                $(row).attr("id", data.id);
                // Редактируем 2ую колонку
                $('td', row).eq(1).html('<a href=' + data.url + '>' + data.code + '</a>');
                $('td', row).eq(-2).html(
                    '<div class="number" data-step="1" data-min="1" data-max="100">' +
                    '<input class="number-text" type="text" name="count" value="1">' +
                    '<a href="#" class="number-minus">−</a>' +
                    '<a href="#" class="number-plus">+</a></div>');
            },
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'],
            lengthMenu: [
                [10, 50, 100],
                ["10 rows", "50 rows", "100 rows"],
            ],
            pageLength: 10,
        });
        $('#users_table tbody').on('click', 'button', function () {
            const cart_message = $('#cart_message');
            const data = table.row($(this).parents('tr')).data();
            console.log(data);
            const cart_count = table.row($(this).parents('tr').find('.number-text').val());
            console.log(cart_count);

Comments

[iljaGolubev]

Покажите как вы создаёте таблицу. как добавляете инпут.

Answer 1

[iljaGolubev]

При клике на кнопку не могу получить текст с инпута в "count"

Вы не из того места пытаетесь получить значение.
Значение тут: `$(this).parents('tr').find('.number-text').val() `
А у вас: `table.row(значение)` - скобка не на месте.

// вместо $('#users_table tbody').on('click' ...
 table.on("click", "button", function (e) {
    let data = table.row(e.target.closest("tr")).data();
    console.log(data);
    let cart_count = $(e.target.closest("tr")).find("input.number-text").val();
    console.log(cart_count);
  });

Но лучше работать с api datatables. Примерно так:

var table = null;
$(document).ready(function () {
  table = $("#users_table").DataTable({
    data: [[29, "Andrew", "Ruby", "9300000", "1", "btn"]],
    columns: [
      { title: "id" },
      { title: "name" },
      { title: "code" },
      { title: "description" },
      // вместо createdRow использовать renderer и изменять table.data сразу при изменении значения поля
      { title: "count", render: function (data, type, row, meta) {
        return "<input type=\"text\" value="+row[4]+" onchange=\" table.cell("+meta["row"]+", 4).data(this.value)\">"; 
     }},
      { title: "action" }
    ],
    columnDefs: [
      {
        data: null,
        defaultContent: "<button>Click!</button>",
        targets: -1
      }
    ],
    
  });

  table.on("click", "button", function (e) {
    // тогда нужное вам значение уже есть тут
    let data = table.row(e.target.closest("tr")).data();
    console.log(data);
  });
});

Answer 2

[xibolba]

Решил так:

const cart_count = document.getElementById(data.id).getElementsByClassName('number-text').namedItem('count').value;

Comments

[iljaGolubev]

хуже чем было, но раз работает ... =)

[xibolba]

Просветите что не так, как надо?

[iljaGolubev]

xibolba, в моём ответе последний кусок кода. Не то чтобы так "надо", но лучше тем, что меньше зависимостей от html разметки.
в вашем решении getElementsByClassName('number-text').namedItem('count') зависит от class="number-text" и атрибута name="count".

При этом у вас, по сути, 3 разных не связанных друг с другом функций

$('#users_table').DataTable({
createdRow: function (row, data, dataIndex) {
$('#users_table tbody').on('click', 'button', function () {

меняете html в createdRow и on('click', 'button', function ломается.
$('#users_table_NEW').DataTable({ - тоже.

В data полученных с сервера нет count? Оно там не нужно? Если нужно, то у вас 2 неявно связанных (через onclick) сущности - row.data и count для неё.

Впрочем, это не про работоспособность кода, а про удобство разработки.
jquery проекты обычно-неизбежно превращаются в спагетти-код отладить который через X-месяцев становится проблематично.