предупреждает значение HTML-тега, сгенерированного из javascript, используя - jquery «attr»

Question

У меня есть функция, которая генерирует <tr>, и для каждого из этих table есть кнопка Update вместе со значениями базы данных, полученными как JSON. Это tr прилагается к столу с помощью $("#RawMatTable").html(RawMat); Это автоматически генерируется table сначала рассматривается для новых записей с помощью input тегов в каждом td и впоследствии может быть обновлена ​​с помощью 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-тегов, на кнопке Click - которая находится в в той же строке? Более четко, щелчок кнопки «Обновить» строки должен указывать значение тега HTML в пределах одной строки.

Пока что я могу получить значение id нажатой кнопки и не могу понять, как читать другие значения.

Пожалуйста, дайте мне знать, если это необходимо разработать более ....

Answer 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, так что если вы делаете большой рефакторинг, код может не работать)

Посмотрите на this JSFiddle, чтобы увидеть его в действии.

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