1

我有一个生成 的函数，<tr>对于其中的每一个table，都有一个UpdateButton 以及作为 JSON 检索的数据库值。这是使用 自动生成tr的附加到表中 的，首先在每个标签的帮助下查看新条目，然后可以在按钮的帮助下更新 - 代码如下 -$("#RawMatTable").html(RawMat);tableinputtdUpdate

function GetRawMaterial() {

     var id = $('#UsrSelectedBprNo').val();
          $.ajax({
              type: "POST",
              url: "http://XXXXXXXXXX:XXXX/XXXXX.svc/XXXXX/" + id,
              data: "{}",
              contentType: "application/json",
              dataType:"json", 
              success:  function (msg) {                    
                   var RawMat = '';                               
                   $.each(msg, function(i,v){
                   RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";                       

                   $("#RawMatTable").html(RawMat);

                   $('button').click(function() {                               
                   var attrValue = $(this).attr('id'); 

                   alert (attrValue);
                   });                                         
                   });

一旦完成......即生成行，这些标签中的值应该用于我的下一个函数作为输入。这些值充当我的 SQL 查询的键。例如，“v.RM_SAP_Code”的值作为参考，下面是我的下一个函数

  function UpdateRawMaterial() {
             $.ajax({
                 type: "PUT",
                 url: "http://XXXX.XXX.XXX/DRLServiceHost/BPRService.svc/UpdateRawMat/ " + BPRNo + "/" + SAP_Code + "/" + Act_Qty + "/" + In_House_Batch + "/" + Equip_Id + "/" + RM_Remark,
                 data: "{}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (result, txtstatus) {
                     alert(txtstatus);
                    },
                 error: function (result) {
                     alert("jQuery Error:" + result.statusText);
                 }
             });
         };

我的问题是如何在按钮 Click 上读取动态生成的 HTML 标记的值 - 它位于同一行中？更清楚地说，A 行的“更新”按钮单击应该给出同一行内 HTML 标记的值。

到目前为止，我只能获取单击按钮的 id 值，并且无法了解如何读取其他值。

请让我知道这是否需要详细说明....

4

2 回答 2

1

您可以尝试通过以下方式工作：

// Listen to click events on the button
$("button").click(function(e) {
    // Find the input field by first finding the parenting tr, then find the input
    var input = $(this).parents("tr").find("input[type='text']");
    alert(input.val());
});

在回调函数中，this指的是按钮，可以tr通过.parents('tr'). 找到父 tr 后，您可以找到输入字段。

（这需要一定的 HTML 结构，所以如果您进行重大重构，代码可能无法正常工作）

看看这个 JSFiddle以了解它的实际效果。

于 2013-07-22T11:24:39.503 回答
0

进入按钮单击处理程序后，使用 jQuery DOM Traversal方法访问该行中的其他元素。为了提高效率，您应该只在最后设置一次 html，您可以使用on()仅注册一个处理程序，而不是为每个按钮注册一个处理程序。

var RawMat = '';

$.each(msg, function(i,v)
{
    RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";
});

var $html = $(RawMat);

$html.on('click', 'button', function()
{
    // cache jquery object
    var $this = $(this);

    // alert id
    alert($this.attr('id'));

    // get the tr parent
    var $tr = $this.closest('tr');

    // alert 'RM_Name'
    $tr.find('td:nth-child(2)').text();
});

$("#RawMatTable").html($html);
于 2013-07-22T11:35:02.647 回答