2

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

我曾考虑过为每个单元格添加一个 id 或 onclick 属性对坐标进行硬编码，但是这会使将来扩展表格变得更加困难，而且似乎效率低下。

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

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

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

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

4

2 回答 2

2

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

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

演示

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

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

于 2013-01-29T01:41:56.900 回答
1

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

<!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>
于 2013-01-29T02:49:13.977 回答