如何在HTML表中获取行索引

How to get the row index in a HTML table

本文关键字：获取 索引 HTML      更新时间：2023-09-26

我正在尝试更新数据库用户表。我制作了一个HTML表，其中包含数据库中用户的数据。这个HTML表格包含3列，每行有一个按钮。当我单击此按钮时，我应该使用html表单元格中的输入和选择字段中包含的信息更新用户数据库表。我的HTML代码是:

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

我试图获得更新按钮被单击的行数，然后获得每列中的数据，但我失败了。我的js代码是:

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

});
 });

我如何在我单击按钮的行中获得数据(输入文本，选中的项目)?

可以这样使用

$("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();
});

您可以使用closest('tr')获取当前按钮的行，并使用index()获取行索引。

现场演示 

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

可能类似下面的代码将帮助您获得所需的信息。

$("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/

您可以使用parents()函数进行相同的操作。

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

这将给出单击按钮所在的行。

<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);
});
相关文章：