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属性附加了事件处理程序，this函数中的updateUser()关键字将引用window，而不是引发事件的元素。为了达到您的要求，您最好使用不显眼的委托事件处理程序。在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...
});

Answer 2

您缺少的是引用所点击行的索引。您已经有for循环提供的索引，因此只需将其插入onclick。

tu.append("<td> <a href=''><i class='fa fa-check' onclick='updateUser(" + i + ")'></i></a></td>")

在updateUser函数中，使用rowIndex获取行：

var updateUser = function(rowIndex) {
    var nRow = $('#bodyTableUpdate').find('tr')[rowIndex];
    ...

这是解决您问题的最简单方法，但Rory's answer可以很好地解释this如何运作，您做错了什么，以及如何做事的良好方向右

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

2 个答案: