为数据表中的子行创建点击事件的最佳方法

Question

我在数据表上有一组子行，每个子行都显示我们在库存中的一个项目。我希望能够在每个孩子中都有一个按钮，允许您将更新传递给库存，以便更容易阅读和显示。所以子行是这样的：

                '<table>'  + 
                '<tr>' + 
                '<td>In Stock: </td>' +  
                '<td><div id="stockval' + d.nID + '">' + d.nStock + '</div></td>' +  
                '<input id="idVal' + d.nID + '" type="hidden"  value="' + d.nID + '">' +  
                '<td>Add Stock:</td>' +  
                '<td><input type="number" min="-99" max="99" id="stockup' + d.nID + '"> </td>' +  
                '<td><input type="submit" id="submit' + d.nID + '" value="Add" ></td>' +  
                '</tr>' +  
                '</table >' +   
                '$("#submit' + d.nID + '").click(function() {' +  
                ' var UpStock = $("#stockup' + d.nID + '").text(); ' +  
                ' var OrigStock = $("#idVal' + d.nID + '").text();' +  
                '$("#idVal' + d.nID + '").text() = UpStock + OrigStock' +  
                '})'

如您所见，输入字段的 ID 为“Stockup”加上该库存的唯一 ID（因此项目 122 在输入字段上的 ID 为“Stockup122”。然后是类似的提交按钮提交和库存 id ("submit122")。因此每个输入和提交按钮都有一个唯一ID，用于触发 onclick 事件，然后从字段中读取数据，以便将其传递到数据库。但脚本部分仅显示为纯文本在子行中。为每个按钮生成点击脚本的最佳方法是什么？

Answer 1

有几种方法可以解决这个问题。我将在下面详细介绍两个，一个利用 jQUery，另一个仅依赖于一点 Javascript。

利用 jQuery 事件处理程序

如果您不是手动生成这些点击事件，而是有一个通用事件处理程序可以应用于您的所有个 ID，那会怎样？如果你做了这样的事情，你可以将所有逻辑包装在一个事件处理程序中，让你的动态生成按预期工作：

 <!-- Code for your dynamic table -->
 '<table>'  + 
      <!-- Notice the item-stock class, which you can reference via jQuery -->
 '    <tr class="item-stock">' + 
 '        <td>In Stock: </td>' +  
 '        <td>' +
 '            <div id="stockval' + d.nID + '">' + d.nStock + '</div>' +
 '            <input id="idVal' + d.nID + '" type="hidden" value="' + d.nID + '"/>' + 
 '        </td>' +  
 '        <td>Add Stock:</td>' +  
 '        <td>' +
 '            <input type="number" min="-99" max="99" id="stockup' + d.nID + '"/>' +
 '        </td>' +  
 '        <td>' +
 '           <input type="button" id="submit' + d.nID + '" value="Add" class="stock-submit-button"  />' +
 '        </td>' +  
 '    </tr>' +  
 '</table >' +   


// When you click on a stock submit button (notice the added class attribute above)
$('.stock-submit-button').on('click', function() {
      // Find the nearest "item-stock" class that wraps your calls
      var wrapper = $(this).closest('.item-stock');

      // Now use this to look up your values (via the "starts-with" selector)
      var upstock = $(wrapper).find('[id^="stockup"]').val();
      var originalStock = $(wrapper).find('[id^="idVal"]').val();

      // Update your stock
      $(wrapper).find('[id^="idVal"]').val(upstock + originalStock)
});

利用 Javascript

另一种方法是定义处理执行股票更新的函数，并通过按钮单击事件调用它：

// These each would be references to the items you want to read/update
function updateStock(itemId, stockChange){
     // Find your hidden element based on its ID
     var stock = document.querySelector(itemId),
         change = document.querySelector(stockChange);


     // Now parse the value for your change and add it
     stock.value += parseInt(change.value, 10);
}

那么您只需要调整动态生成的标记以包含这些值：

<input id="submit' + d.nID + '" 
       type="button"  
       value="Add" 
       onclick="updateStock('idVal" + d.nID + "','stockup" + d.nID + "')" />'

Answer 2

我们需要更正您的标记才能继续。 在这些元素上添加类属性，我用idValField,stockUpField,和submitBtn;

<input class="idValField" type="hidden"  value="'+ d.nID + '">

<input class="stockUpField" type="number" min="-99" max="99" >

<input class="submitBtn" type="submit" " value="Add" >

然后在body标签下方的jquery脚本中，为submitBtn类添加一个onclick事件处理程序，该类的任何元素的所有点击都会调用这个函数；

$(document).on("click",".submitBtn",function(){

   // access parent tr element and find the classes
   var UpStock = $(this).closest("tr").find(".stockUpField").val();
   var OrigStock = $(this).closest("tr").find(".idValField").val();

   // add two variables 
   $(this).closest("tr").find(".idValField").val(UpStock+OrigStock);
});