Question

我一直在寻找答案和解决方案，但我仍然被卡住了。

我试图让这个jsfiddle将表行数据存储在仅为该行检查的复选框上，并包含一个输入文本框。目前它将生成包含我需要的所有信息的警报，但它似乎做了两件我需要帮助的事情：

表格的第一行会提示pquantity输入，但每行之后只显示第一行的pquantity而不是pquantity。
如果您选中一个框并获取数据，然后选中另一行复选框，它将提醒该行并且第一行提醒。都在alert和console.log中。我只需要该行来提醒/控制json一次。

此应用程序的最终目标是让用户查看动态数据表，输入数量，然后单击复选框，将json数据发送到php，然后通过EPL将其发送到Zebra打印机。

我尝试了各种jQuery事件（更改/点击/开启等），但没有运气。我已经尝试了几个在线示例，但他们都想迭代每一行（.each），或者他们没有考虑输入字段。

HTML：

<table id="item_table" class="pltable">
<thead>
    <tr>
      <th data-dynatable-column="fsono" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fsono</a>
      </th>
      <th data-dynatable-column="fenumber" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fenumber</a>
      </th>
      <th data-dynatable-column="fac" class="dynatable-head">
          <a class="dynatable-sort-header" href="#">fac</a>
      </th>
      <th data-dynatable-column="fpartno" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fpartno</a>
      </th>
      <th data-dynatable-column="fpartrev" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fpartrev</a>
      </th>
      <th data-dynatable-column="fquantity" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fquantity</a>
      </th>
      <th data-dynatable-column="fcusrchr1" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">fcusrchr1</a>
      </th>
      <th data-dynatable-column="pquantity" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">pquantity</a>
      </th>
      <th data-dynatable-column="plabel" class="dynatable-head">
        <a class="dynatable-sort-header" href="#">plabel</a>
      </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-1022</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">1350.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">002</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-3088</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">550.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">003</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4021</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">600.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">004</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4063</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">200.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">005</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4064</td>
        <td style="text-align: left;">000</td>
        <td style="text-align: left;">450.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">006</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4089</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">400.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">007</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4112</td>
        <td style="text-align: left;">000</td>
        <td style="text-align: left;">900.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">008</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4142</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">50.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">009</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4144</td>
        <td style="text-align: left;">001</td>
        <td style="text-align: left;">200.00000</td>
        <td style="text-align: left;">335</td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
    <tr>
        <td style="text-align: left;">132719</td>
        <td style="text-align: left;">010</td>
        <td style="text-align: left;">Default</td>
        <td style="text-align: left;">234-4167</td>
        <td style="text-align: left;">000</td>
        <td style="text-align: left;">150.00000</td>
        <td style="text-align: left;"></td>
        <td style="text-align: left;">
            <input type="text" id="pquantity" size="2" value="">
        </td>
        <td style="text-align: left;">
            <input type="checkbox" value="" id="plabel" class="plabel">
        </td>
    </tr>
</tbody>

JavaScript的：

$('#item_table tbody tr td input.plabel').on('change', function () {
  if ($(this).is(':not(:checked)')) {
    return false;
  }

  var table = $("table tbody");

  table.find('tr').click(function () {
    var $tds = $(this).find('td'),
        fsono = $tds.eq(0).text(),
        fenumber = $tds.eq(1).text(),
        fac = $tds.eq(2).text();
    fpartno = $tds.eq(3).text();
    fpartrev = $tds.eq(4).text();
    fquantity = $tds.eq(5).text();
    fcusrchr1 = $tds.eq(6).text();
    pquantity = $('#pquantity').val();


    // do something with productId, product, Quantity
    alert('fsono: ' + fsono + '\nfenumber: ' + fenumber + '\nfac: ' + fac + '\nfpartno: ' + fpartno + '\nfpartrev: ' + fpartrev + '\nfquantity: ' + fquantity + '\nfcusrchr1: ' + fcusrchr1 + '\npquantity: ' + pquantity);
  });
});

非常感谢任何帮助。

谢谢。

Answer 1

标签的id应该唯一地标识文档中的标签。在您的文档中，您似乎使用了id =＆＃34; plabel＆＃34;和id =＆＃34; pquantity＆＃34;多次。

不要使用$（＆＃34;＃plabel＆＃34;），而是将类标记命名为plabel和pquantity，并在当前行上进行查找。

例如，您可以执行以下操作。

$(this).find(".pquantity");

这应该为您提供该特定行的数量，而不是第一行的数量。

Answer 2

我不确定你为什么要在更改处理程序中绑定一个单击处理程序，但这就是为什么你会收到多个警报。每次单击复选框时都会绑定一个新的单击处理程序。

这里没有点击处理程序：

http://jsfiddle.net/GwZLW/

$('#item_table input.plabel').on('change', function () {
    if ($(this).is(':not(:checked)')) {
        return false;
    }

    var $tds = $(this).closest('tr').find('td'),
        fsono = $tds.eq(0).text(),
        fenumber = $tds.eq(1).text(),
        fac = $tds.eq(2).text();
    fpartno = $tds.eq(3).text();
    fpartrev = $tds.eq(4).text();
    fquantity = $tds.eq(5).text();
    fcusrchr1 = $tds.eq(6).text();
    pquantity = $('#pquantity').val();

    // do something with productId, product, Quantity
    alert('fsono: ' + fsono + '\nfenumber: ' + fenumber + '\nfac: ' + fac + '\nfpartno: ' + fpartno + '\nfpartrev: ' + fpartrev + '\nfquantity: ' + fquantity + '\nfcusrchr1: ' + fcusrchr1 + '\npquantity: ' + pquantity);

});

此外，元素id必须是唯一的。这就是为什么$('#pquantity').val();返回未定义的原因。我会给它一个课程并选择$tds.find('.pquantity')。

我还建议您提供td类或使用类包装span s中的文本，而不是通过索引选择，这可能是脆弱的。

Answer 3

我想你想要这样的东西：

http://jsfiddle.net/h7b28/2/

删除了里面的点击处理程序的绑定，无论如何你都不需要它，那就是导致多个警报的原因

但是！....这远非完整，就像上面的建议一样，ID名称应该是唯一的，你也有ID为plabel和类plabel的输入，非常混乱.. ..

Answer 4

这是一个不同的尝试：

$("table").on("click", "tr td input.plabel", function () {

    if ($(this).is(':not(:checked)')) {
        return false;
    }

    var obj = {};

    $(this).closest("tr").find("td").each(function (index) {
        var columnName = $("table th").eq(index).text();
        obj[columnName] = ($(this).find("input").length) ? $(this).find("input").val() : $(this).text();
    });


    console.log(obj);
});

http://jsfiddle.net/NicoO/h7b28/5/

收集一个带有文本输入的表行，通过json发送

4 个答案: