javascript - 如何使用javascript获取一行表中的单元格值？

Question

我想获取表格一行中的所有单元格值。但我在这里写的只是为了在我的表格中获取第一行的单元格。我想通过所选行获取单元格值。谢谢，请帮忙。

var updateUser = function(e) {
    var nRow = $(this).parents('tr')[1];
    var jqTds = $('input', nRow);

    var id = jqTds[1].value;
    var name = jqTds[2].value;
    var address = jqTds[3].value;
    var username = jqTds[4].value;
    var password = jqTds[5].value;
    var role = jqTds[6].value;
}

我还为此使用了 jquery 和 ajax。

$.ajax({
  url: 'http:/localhost/api/semuaorang',
  dataType: 'text',
  method: 'POST',
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
  success: function(response){
    obj = JSON.parse(response);

    for (var i = 0; i < obj.message.length; i++) {\
       tu = $('<tr/>');
       tu.append("<td><input type='text' name='name' class='foo' readonly value='"+obj.message[i].Id+"'></td>");
       tu.append("<td><input type='text' name='name' value='"+obj.message[i].Nama+"'></td>");
       tu.append("<td><input type='text' name='name' value='"+obj.message[i].Alamat+"'></td>");
       tu.append("<td><input type='text' name='name' value='"+obj.message[i].Username+"'></td>");
       tu.append("<td><input type='text' name='name' value='"+obj.message[i].Password+"'></td>");
       tu.append("<td><input type='text' name='name' readonly value='"+obj.message[i].role+"'></td>");
       tu.append("<td> <a href=''><i class='fa fa-check' onclick='updateUser()'></i></a></td>")
       $('#bodyTableUpdate').append(tu);

    }
  },
  error: function(xhr, status, error){
    alert(error);
  },
  complete: function(){
 }
});

Answer 1

当您使用 onclick 属性附加事件处理程序时，updateUser() 函数中的 this 关键字将引用 window，而不是引发事件的元素。要实现您的要求，您最好使用不显眼的委托(delegate)事件处理程序。在 jQuery 中，您可以使用 on() 来执行此操作:

// in the $.ajax settings:
success: function(response) {
    // Note JSON.parse is not required here - jQuery does it for you automatically
    for (var i = 0; i < obj.message.length; i++) {
        tu = $("<tr/>");
        tu.append('<td><input type="text" name="id" value="' + obj.message[i].Id + '" readonly="true"></td>');
        tu.append('<td><input type="text" name="name" value="' + obj.message[i].Nama + '"></td>');
        tu.append('<td><input type="text" name="address" value="' + obj.message[i].Alamat + '"></td>');
        tu.append('<td><input type="text" name="username" value="' + obj.message[i].Username + '"></td>');
        tu.append('<td><input type="text" name="password" value="' + obj.message[i].Password + '"></td>');
        tu.append('<td><input type="text" name="role" value="' + obj.message[i].role + '" readonly="true"></td>');
        tu.append('<td><a href="#" class="update-user"><i class="fa fa-check"></i></a></td>')
        $('#bodyTableUpdate').append(tu);
    }
},

// new click handler:
$('#bodyTableUpdate').on('click', '.update-user', function(e) {
    e.preventDefault();
    var $row = $(this).closest('tr');
    var id = $row.find('input[name="id"]').val();
    var name = $row.find('input[name="name"]').val();
    var address = $row.find('input[name="address"]').val();
    var username = $row.find('input[name="username"]').val();
    var password = $row.find('input[name="password"]').val();
    var role = $row.find('input[name="role"]').val();

    // use the values as required here...
});