How to get a cell value in a row of table use javascript?

Question

I want to get all the cell value in a row of a table. but what i wrote here is just to get the first row's cell in my table. I want to get the cell value by the row that selected. Thank you and please help.

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

And i also used jquery and ajax for it.

$.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

As you have attached the event handler using the onclick attribute the this keyword in the updateUser() function will reference the window , not the element which raised the event. To achieve what you require you would be better of using an unobtrusive delegated event handler. In jQuery, you can use on() to do this:

// 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

What you're missing is an index to reference the clicked row. You already have an index provided by the for loop, so just insert that into your onclick .

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

And in your updateUser function, use the rowIndex to get the row:

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

This is the simplest solution to your issue, but Rory's answer is a good explanation of how this works, what you're doing wrong, and good direction on how to do things right .