blocks|key|1359299|text|在创建表格时，您可以在单元格中输出数据吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359300|因此，您的表将如下所示：|1359301|<table>
++<thead>...</thead>
++<tbody>
++++<tr><td+data-row='1'+data-column='1'>value</td>
++++++<td+data-row='1'+data-column='2'>value</td>
++++++<td+data-row='1'+data-column='3'>value</td></tr>

++<tbody>
</table>|code-block|syntax|javascript|1359302|那么这将是一件简单的事情|1359303|$("td").click(function(event)+{
+++var+row+=+$(this).attr("data-row");
+++var+col+=+$(this).attr("data-col");
}|1359304|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Can you output that data in the cells as you are creating the table?</p>

<p>so your table would look like this:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;...&lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;&lt;td data-row='1' data-column='1'&gt;value&lt;/td&gt;
      &lt;td data-row='1' data-column='2'&gt;value&lt;/td&gt;
      &lt;td data-row='1' data-column='3'&gt;value&lt;/td&gt;&lt;/tr&gt;

  &lt;tbody&gt;
&lt;/table&gt;
</code></pre>

<p>then it would be a simple matter</p>

<pre><code>$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
</code></pre>


blocks|key|1574559|text|最好将单击处理程序绑定到整个表，然后使用event.target获取单击的TD。这就是我能添加的所有内容，因为现在是凌晨1:20|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574560|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>its better to bind a click handler to the entire table and then use event.target to get the clicked TD. Thats all i can add to this as its 1:20am</p>


blocks|key|1574601|text|您可以在给定的上下文中使用Core/index函数，例如，您可以检查TD在其父TR中的索引以获得列号，您可以检查表的TR索引以获得行号：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1574602|$('td').click(function(){
++var+col+=+$(this).parent().children().index($(this));
++var+row+=+$(this).parent().parent().children().index($(this).parent());
++alert('Row:+'+%2B+row+%2B+',+Column:+'+%2B+col);
});|code-block|syntax|javascript|1574603|查看正在运行的示例here。|1574604|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Core/index|1|http://jsbin.com/eyeyu/edit^0|D|A|0|0|0|9|4|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You can use the <a href="http://docs.jquery.com/Core/index" rel="noreferrer">Core/index</a> function in a given context, for example you can check the index of the TD in it's parent TR to get the column number, and you can check the TR index on the Table, to get the row number:</p>

<pre><code>$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});
</code></pre>

<p>Check a running example <a href="http://jsbin.com/eyeyu/edit" rel="noreferrer">here</a>.</p>


blocks|key|1574710|text|不经意间，一种方法是抓取所有之前的元素并对它们进行计数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574711|$('td').click(function(){+
++++var+colIndex+=+$(this).prevAll().length;
++++var+rowIndex+=+$(this).parent('tr').prevAll().length;
});|code-block|syntax|javascript|1574712|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Off the top of my head, one way would be to grab all previous elements and count them.</p>

<pre><code>$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
</code></pre>


blocks|key|1359609|text|$('td').click(function()+{
++++var+myCol+=+$(this).index();
++++var+$tr+=+$(this).closest('tr');
++++var+myRow+=+$tr.index();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1359610|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
</code></pre>


blocks|key|1574855|text|单击时获取列索引：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574856|$(this).closest("td").index();|code-block|syntax|javascript|1574857|单击时获取行索引：|1574858|$(this).closest("tr").index();|1574859|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Get COLUMN INDEX on click:</p>

<pre><code>$(this).closest("td").index();
</code></pre>

<p>Get ROW INDEX on click:</p>

<pre><code>$(this).closest("tr").index();
</code></pre>


<p>How do I get the row and column number of the clicked table cell using jQuery, i.e., </p>

<pre><code>$("td").onClick(function(event){
   var row = ...
   var col = ...
});
</code></pre>


Table row and column number in jQuery

jQuery

如何使用jQuery获取单击的表单元格的行号和列号，即，$("td").onClick(function(event){   var row = ...   var col = ...});

问jQuery中的表格行号和列号
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的表格行号和列号EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的表格行号和列号
EN