How to get the row index in a HTML table

Question

I'm trying to update a database users table. I made an HTML table which contains the data of the users in my database. this HTML table contains 3 columns and in each row there is a button. when I click this button I should update the users database table with the information contained in the input and select field in the cells of the html table. my html code is:

<tr>
  <td><input type="text" name ="name"/></td>
  <td>
      <select name="select_job">
         <option value="1"> Engineer </option>
         <option value="2"> Doctor </option>
      </select>
  </td>
  <td><button>update </button></td>
</tr>

I tried to get the number of the rows on which the update button was clicked and then to get the data in each column but I failed . my js code is:

$("button").click( function() {
 var $row = $(this).parent().parent(); //tr
  var $columns = $row.find('td');
  $.each($columns, function(i, item) {

   values = values + 'td' + (i ) +':<br/>';


});

 });

How can I get the data (inpt text, selected item) in the row on which I clicked the button?

Anoop Joshi P · Accepted Answer · 2014-05-20 09:09:13Z

6

You can use like this

$("button").click(function () {
    var inputValue = $(this).closest("tr").find("input[type=text]").val();
    var selectValuse = $(this).closest("tr").find("[name='select_job']").val();
    var index = $(this).closest("tr").index();
});

answered May 20, 2014 at 9:09

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-05-20 09:10:23Z

2

You can use closest('tr') to get the row for current button and use index() to get the index of the row.

Live Demo

$(this).closest('tr').index()

edited May 20, 2014 at 9:10

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered May 20, 2014 at 9:05

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

scripto · Accepted Answer · 2014-05-20 09:18:40Z

1

May be something like the code below will help you to get the required information.

$("button").click(function () {
    var $row = $(this).parent().parent(); //tr
    var $columns = $row.find('td');
    var rowIndex = $row.index();
    var values = new Array();
    for (var i = 0; i < $columns.length - 1; i++) {
        var item = $columns[i];
        values.push($(item).children().val());
    }
    alert(JSON.stringify(values));
});

http://jsfiddle.net/X4mMw/

answered May 20, 2014 at 9:18

scripto

2,2971 gold badge14 silver badges13 bronze badges

Comments

Jitendra Pancholi · Accepted Answer · 2014-05-20 09:22:45Z

1

You can use parents() function for the same.

var tr = $(this).parents('tr');

this would give your row on which button was clicked.

<tr>
  <td><input type="text" name ="name"/></td>
  <td>
      <select name="select_job">
         <option value="1"> Engineer </option>
         <option value="2"> Doctor </option>
      </select>
  </td>
  <td><button>update </button></td>
</tr>


$("button").click(function () {
    var $row = $(this).parents('tr:first');

    var txt = $row.find('input[type=text]').val();
    var salVal = $row.find('select:selected').val();

    alert(txt+' '+salVal);
});

edited May 20, 2014 at 9:22

answered May 20, 2014 at 9:08

Jitendra Pancholi

7,62012 gold badges54 silver badges85 bronze badges

2 Comments

Dev DOS Over a year ago

and how to get the data of the input text and selected item?

Jitendra Pancholi Over a year ago

@GhadaSalem: Please check now

Collectives™ on Stack Overflow

How to get the row index in a HTML table

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related