Question

我有两行html表：

<table id="mytable">
<tbody>
<tr><td rowspan="2">Row text</td><td>first cell</td><td>second cell</td><td>third cell</td></tr>
<tr>
   <td><input type="text" value="" /></td>
   <td><input type="text" value="" /></td>
   <td><input type="text" value="" /></td>
</tr>
</tbody>
</table>

我必须从第一行获取相应单元格的文本，同时单击第二行的任何输入字段。例如，如果任何用户点击第二行的第一个输入字段，则第一个单元格＆＃39;应该通过jQuery获取。我试图实现如下：

$('#mytable tbody tr td input[type="text"]').click( function(){
   var thisRow = $(this).closest('tr').index();
   var thisCell = $(this).closest('td').index();
   var upRow = thisRow-1;
   var firstCellText = upRow.find('td:eq(thiscell+1)').text();
alert(firstCellText);
});

但文字未达到预期效果。如何获取文本？

Answer 1

您需要使用+连接字符串。您也可以使用 prev() 选择之前的tr，无需使用index选择它。

＆＃13;

$('#mytable tbody tr td input[type="text"]').click(function() {
  var thisRow = $(this).closest('tr');
  var thisCell = $(this).closest('td').index();
  var firstCellText = thisRow.prev().find('td:eq(' + (thisCell + 1) + ')').text();
  alert(firstCellText);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td rowspan="2">Row text</td>
      <td>first cell</td>
      <td>second cell</td>
      <td>third cell</td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

更新：如果您想从第一行获取文字，请使用 :first 获取第一行。（由@arunbahal推荐）

＆＃13;

var $row = $('#mytable tbody tr:first');
$('#mytable tbody tr td input[type="text"]').click(function() {
  var firstCellText = $row.find('td:eq(' + ($(this).closest('td').index() + 1) + ')').text();
  alert(firstCellText);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td rowspan="2">Row text</td>
      <td>first cell</td>
      <td>second cell</td>
      <td>third cell</td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

请尝试以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('#mytable tbody tr td input[type="text"]').click( function(){
	var thisCell = $(this).closest('td').index();
	var celltext = $(this).closest('tr').prev().find("td:eq("+thisCell+")").text();
	alert(celltext);
});

});
</script>

<table id="mytable">
<tbody>
<tr>
	<td>first cell</td>
	<td>second cell</td>
	<td>third cell</td>
</tr>
<tr>
   <td><input type="text" value="" id="1"/></td>
   <td><input type="text" value="" id="2"/></td>
   <td><input type="text" value="" /></td>
</tr>
</tbody>
</table>

如何通过jQuery按行索引查找单元格文本

2 个答案: