DEMO

Question

我有一个HTML表格，大约有20列和10行。每列都有一个字母，每行都有一个数字。使每个单元格可单击的最佳方法是什么，以便它执行JavaScript函数并传入坐标？

我已经考虑过将每个单元格转换成id或onclick属性，然后对坐标进行硬编码，但是在将来扩展表格会变得更加困难。

我认为获取单元格所在的行很容易，只需获取父元素即可。但我不知道如何获得专栏？

这是否存在获取单元格行和列的既定方法？

这是特别是页面：http://jonathanb.co.uk/papers/default.html

我有一个链接列表，每个单元格对应一个链接。我计划允许重新排序行和列或至少隐藏一些。目前我正在使用JavaScript创建表，但我认为最好这样做是php。

Answer 1

您可以使用rowIndex和cellIndex动态获取表格单元格的行和列（假设您有一个名为cell的元素）：

var rowNumber = cell.parentNode.rowIndex + 1;
var colNumber = cell.cellIndex + 1;

DEMO

- 查看开发者控制台输出 -

你应该很容易添加点击监听器（并且取决于你是否想要使用jQuery）。

Answer 2

您可以使表格可点击，并获取您单击的目标单元格的单元格和行索引。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>cell row index</title>
<style>
table{background-color:white}
thead{background-color:green;color:white}
td,th{border:1px #000000 solid;font-size:1em;font-weight:500}
th{font-weight:bold}
h2{color:#191970}
#screenDiv{max-width:800px}    
</style>

<script>
function getCellRow(td){
    td= td? td.target:window.event? event.srcElement:'';
    var rc= [], pa= td.parentNode;
    if(pa.tagName== 'TR'){
        alert([pa.rowIndex, td.cellIndex]);
    }
}

window.onload= function(){
    document.getElementsByTagName('table')[0].onclick=getCellRow;
}
</script>

</head>
<body>
<div id="screenDiv">
<h1>Symbol Entities in HTML</h1>
<h2>Greek Alphabet</h2>
<table>
<thead><tr>
<th width="10%">Example</th><th width="20%">Named</th><th width="20%">Numeric</th><th width="50%">Description</th>
</tr></thead>
<tbody>
<tr><td>&Alpha;</td><td>&amp;Alpha;</td><td>&amp;#913;</td><td>capital alpha</td></tr>
<tr><td>&Beta;</td><td>&amp;Beta;</td><td>&amp;#914;</td><td>capital beta</td></tr>
<tr><td>&Gamma;</td><td>&amp;Gamma;</td><td>&amp;#915;</td><td>capital gamma</td></tr>
<tr><td>&Delta;</td><td>&amp;Delta;</td><td>&amp;#916;</td><td>capital delta</td></tr>
<tr><td>&Epsilon;</td><td>&amp;Epsilon;</td><td>&amp;#917;</td><td>capital epsilon</td></tr>
<tr><td>&Zeta;</td><td>&amp;Zeta;</td><td>&amp;#918;</td><td>capital zeta</td></tr>
<tr><td>&Eta;</td><td>&amp;Eta;</td><td>&amp;#919;</td><td>capital eta</td></tr>
<tr><td>&Theta;</td><td>&amp;Theta;</td><td>&amp;#920;</td><td>capital theta</td></tr>
<tr><td>&Iota;</td><td>&amp;Iota;</td><td>&amp;#921;</td><td>capital iota</td></tr>
<tr><td>&Kappa;</td><td>&amp;Kappa;</td><td>&amp;#922;</td><td>capital kappa</td></tr>
<tr><td>&Lambda;</td><td>&amp;Lambda;</td><td>&amp;#923;</td><td>capital lambda</td></tr>
<tr><td>&Mu;</td><td>&amp;Mu;</td><td>&amp;#924;</td><td>capital mu</td></tr>
<tr><td>&Nu;</td><td>&amp;Nu;</td><td>&amp;#925;</td><td>capital nu</td></tr>
<tr><td>&Xi;</td><td>&amp;Xi;</td><td>&amp;#926;</td><td>capital xi</td></tr>
<tr><td>&Omicron;</td><td>&amp;Omicron;</td><td>&amp;#927;</td><td>capital omicron</td></tr>
<tr><td>&Pi;</td><td>&amp;Pi;</td><td>&amp;#928;</td><td>capital pi</td></tr>
<tr><td>&Rho;</td><td>&amp;Rho;</td><td>&amp;#929;</td><td>capital rho</td></tr>
<tr><td>&Sigma;</td><td>&amp;Sigma;</td><td>&amp;#931;</td><td>capital sigma</td></tr>
<tr><td>&Tau;</td><td>&amp;Tau;</td><td>&amp;#932;</td><td>capital tau</td></tr>
<tr><td>&Upsilon;</td><td>&amp;Upsilon;</td><td>&amp;#933;</td><td>capital upsilon</td></tr>
<tr><td>&Phi;</td><td>&amp;Phi;</td><td>&amp;#934;</td><td>capital phi</td></tr>
<tr><td>&Chi;</td><td>&amp;Chi;</td><td>&amp;#935;</td><td>capital chi</td></tr>
<tr><td>&Psi;</td><td>&amp;Psi;</td><td>&amp;#936;</td><td>capital psi</td></tr>
<tr><td>&Omega;</td><td>&amp;Omega;</td><td>&amp;#937;</td><td>capital omega</td>
</tbody>
</table>  
</div>
</body>
</html>

HTML表格中的可点击单元格

2 个答案:

DEMO