如何在HTML表中獲取行索引

Question

我正在嘗試更新數據庫用戶表。 我制作了一個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/>';


});

 });

如何在單擊按鈕的行中獲取數據（inpt文本，所選項目）？

Answer 1

你可以像這樣使用

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

Answer 2

您可以使用closest('tr')獲取當前按鈕的行，並使用index（）來獲取行的索引。

現場演示

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

Answer 3

您可以使用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);
});

Answer 4

可能類似下面的代碼將幫助您獲得所需的信息。

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