Fatal编程技术网
  • javascript/
  • Javascript HTML表格中的可单击单元格

Javascript HTML表格中的可单击单元格

javascript html

Javascript HTML表格中的可单击单元格,javascript,html,Javascript,Html,我有一个HTML表格，大约有20列10行。每列有一个字母，每行有一个数字。让每个单元格都可以点击的最好方法是什么，这样它就可以执行JavaScript函数并在坐标中传递 我曾想过给每个单元格添加一个id或onclick属性，并对坐标进行硬编码，但这会使以后扩展表变得更加困难，而且似乎效率低下 我认为获取单元格所在的行很容易，只需获取父元素即可。但是我不知道怎么得到这个专栏 这是一种既获取单元格的行又获取单元格的列的既定方法吗 特别是这一页： 我有一个链接列表，每个单元格对应一个链接。我计划允许对

我有一个HTML表格，大约有20列10行。每列有一个字母，每行有一个数字。让每个单元格都可以点击的最好方法是什么，这样它就可以执行JavaScript函数并在坐标中传递

我曾想过给每个单元格添加一个id或onclick属性，并对坐标进行硬编码，但这会使以后扩展表变得更加困难，而且似乎效率低下

我认为获取单元格所在的行很容易，只需获取父元素即可。但是我不知道怎么得到这个专栏

这是一种既获取单元格的行又获取单元格的列的既定方法吗

特别是这一页：

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

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

-请参阅开发人员控制台输出-

添加单击监听器应该很容易（这取决于是否要使用jQuery）。

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

<!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>


单元格行索引
表{背景色：白色}
thead{背景色：绿色；颜色：白色}
td，th{边框：1px#000000实心；字体大小：1em；字体重量：500}
th{font-weight:bold}
h2{颜色：#191970}
#screenDiv{最大宽度：800px}
函数getCellRow（td）{
td=td？td.target:window.event？event.src元素：“”；
var rc=[]，pa=td.parentNode；
如果（pa.tagName=='TR'）{
警报（[pa.rowIndex，td.cellIndex]）；
}
}
window.onload=function（）{
document.getElementsByTagName（'table'）[0].onclick=getCellRow；
}
HTML中的符号实体
希腊字母
ExampleNamedNumericDescription
&阿尔法&；阿尔法&#913;首府阿尔法
&β&；β&#914;资本贝塔
&伽马射线&；伽马射线&#915;资本伽马
&三角洲&；三角洲&#916;首都三角洲
&ε&；ε&#917;大写字母ε
&泽塔&；泽塔&#918;首都泽塔
&埃塔&；埃塔&#919;首都埃塔
&θ&；θ&#920;首都西塔
&物联网&；物联网&#921;首都iota
&卡帕&；卡帕&#922;首都卡帕
&兰姆达&；兰姆达&#923;首都拉姆达
&穆&；穆&#924;首都穆
&怒族&；怒族&#925;首都怒江
&十一,&；席；amp#926;资本席
&奥米克龙&；奥米克龙&#927;首都奥米克龙
&Pi&；Pi&#928;大写圆周率
&Rho&；Rho&#929;首府罗
&西格玛&；西格玛&#931;资本西格玛
&头&；头&#932;首府头
&上升&；上升&#933;资本增值
&Phi&；Phi&#934;首都披
&迟&；迟&#935;首府池
&Psi&；Psi&#936;首都防扩散安全倡议
&ω&；ω&#937;首都欧米茄
您能否提供代码/示例来说明您试图实现的目标？谢谢，我用我的特定网页更新了我的问题。您能看一看，看看如何以允许重新排序的方式应用此问题吗？我看不到在您的网页上重新排序单元格的任何功能。还没有，但这是有计划的。即使在加载页面后重新排列表单元格，您仍然可以使用我的方法。但是，如果我交换C1和C2列，则与C1对应的索引现在将与C2对应，反之亦然。 
<!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>