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

yinplus 2013-05-08 09:03:40
<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的值改变的话,如何获取所在的行和列???

...全文
645 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
UEAnswer 2013-05-09
  • 打赏
  • 举报
回复
@showbo 还是版主的好。
UEAnswer 2013-05-09
  • 打赏
  • 举报
回复

$(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>
Go 旅城通票 2013-05-08
  • 打赏
  • 举报
回复
<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>
  • 打赏
  • 举报
回复

<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>
豪情 2013-05-08
  • 打赏
  • 举报
回复

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

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧