如何动态获取 table 中 td 所在行 和列

Question

<table border="1">
<tr>
<td>
<input  value="1-1"/>
</td>
<td>
<input  value="1-2"/>
</td>
<td>
<input  value="1-3"/>
</td>
<td>
<input  value="1-4"/>
</td>
</tr>
<tr>
<td>
<input  value="2-1"/>
</td>
<td>
<input  value="2-2"/>
</td>
<td>
<input  value="2-3"/>
</td>
<td>
<input  value="2-4"/>
</td>
</tr>
<tr>
<td>
<input  value="3-1"/>
</td>
<td>
<input  value="3-2"/>
</td>
<td>
<input  value="3-3"/>
</td>
<td>
<input  value="3-4"/>
</td>
</tr>
<tr>
<td>
<input  value="4-1"/>
</td>
<td>
<input  value="4-2"/>
</td>
<td>
<input  value="4-3"/>
</td>
<td>
<input  value="4-4"/>
</td>
</tr>
</table>
怎么才能用jquery 获取每个输入框所在的行和列的值
比如说第二行第二列中input的值改变的话，如何获取所在的行和列？？？jQuery

Answer 1

$('table').find('input').change(function(){
    var td = $(this).parent('td');
    td.css('background', 'red');
    var tr = $(this).closest('tr');
    tr.css('background', 'blue');
});

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("tr td input").focus(function(){
var $t=$(this).val();
$(this).blur(function(){
var $s=$(this).val();
if($t!=$s){
var k=parseInt($(this).parents('td').index())+parseInt(1);
//alert(k);
alert("第:"+parseInt($(this).parents('tr').index()+1)+"行第:"+k+"列");
}
});
});
})
</script>
<table border="1">
 <tr>
 <td>
 <input  value="1-1"/>
 </td>
 <td>
 <input  value="1-2"/>
 </td>
 <td>
 <input  value="1-3"/>
 </td>
 <td>
 <input  value="1-4"/>
 </td>
 </tr>
 <tr>
 <td>
 <input  value="2-1"/>
 </td>
 <td>
 <input  value="2-2"/>
 </td>
 <td>
 <input  value="2-3"/>
 </td>
 <td>
 <input  value="2-4"/>
 </td>
 </tr>
 </table>

Answer 3

<script src="http://www.coding123.net/js/jquery.js"></script>
<script>
$(function(){
  $('table input').change(function(){
    var td=this.parentNode,tr=td.parentNode;
    alert('行号：'+tr.rowIndex+'\n列号：'+td.cellIndex)
  });
});
</script>
<table border="1">
<tr>
<td>
<input  value="1-1"/>
</td>
<td>
<input  value="1-2"/>
</td>
<td>
<input  value="1-3"/>
</td>
<td>
<input  value="1-4"/>
</td>
</tr>
<tr>
<td>
<input  value="2-1"/>
</td>
<td>
<input  value="2-2"/>
</td>
<td>
<input  value="2-3"/>
</td>
<td>
<input  value="2-4"/>
</td>
</tr>
<tr>
<td>
<input  value="3-1"/>
</td>
<td>
<input  value="3-2"/>
</td>
<td>
<input  value="3-3"/>
</td>
<td>
<input  value="3-4"/>
</td>
</tr>
<tr>
<td>
<input  value="4-1"/>
</td>
<td>
<input  value="4-2"/>
</td>
<td>
<input  value="4-3"/>
</td>
<td>
<input  value="4-4"/>
</td>
</tr>
</table>

Answer 4

$(function() {
    $("#table input").bind("change",function() {
        var td=$(this).parent()[0];
        alert("第" + (td.cellIndex+1) +"列，第"+  (td.parentNode.rowIndex+1) +"行。");
        });
}
);<table id="table" border="1">
<tr>
<td>
<input  value="1-1"/>
</td>
<td>
<input  value="1-2"/>
</td>
<td>
<input  value="1-3"/>
</td>
<td>
<input  value="1-4"/>
</td>
</tr>
<tr>
<td>
<input  value="2-1"/>
</td>
<td>
<input  value="2-2"/>
</td>
<td>
<input  value="2-3"/>
</td>
<td>
<input  value="2-4"/>
</td>
</tr>
<tr>
<td>
<input  value="3-1"/>
</td>
<td>
<input  value="3-2"/>
</td>
<td>
<input  value="3-3"/>
</td>
<td>
<input  value="3-4"/>
</td>
</tr>
<tr>
<td>
<input  value="4-1"/>
</td>
<td>
<input  value="4-2"/>
</td>
<td>
<input  value="4-3"/>
</td>
<td>
<input  value="4-4"/>
</td>
</tr>
</table>