使用 jquery "attr" 提醒从 javascript 生成的 HTML 标记的值答案

【问题标题】：alert the value of an HTML tag generated from javascript using - jquery "attr"使用 jquery "attr" 提醒从 javascript 生成的 HTML 标记的值
【发布时间】：2013-07-22 19:35:02
【问题描述】：

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

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);
                 }
             });
         };

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

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

如果需要详细说明，请告诉我......

【问题讨论】：

标签： javascript jquery html

【解决方案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指的是按钮，使用.parents('tr')可以找到父tr。找到父tr后，就可以找到输入字段了。

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

看看this JSFiddle 看看它的实际效果。

【讨论】：

太棒了..我担心我的问题是否太长/无法描述......我唯一做的就是，我使用 input.html() 而不是 input.val() 我需要来自的值 :)

【解决方案2】：

一旦进入按钮点击处理程序，使用 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);

【讨论】：