Как получить значение ячейки в строке таблицы, используйте 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 приписывать 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 работ, что вы «Неправильно, и хорошее руководство о том, как делать вещи» .