2

約 20 列と 10 行の HTML のテーブルがあります。各列には文字があり、各行には数字があります。JavaScript 関数を実行して座標を渡すために、各セルをクリック可能にする最良の方法は何ですか?

各セルにidまたはonclick属性を付けて座標をハードコーディングすることを考えましたが、将来テーブルを拡張するのが難しくなり、効率が悪いようです。

親要素を取得するだけで、セルがある行を取得するのは簡単だと思います。しかし、列を取得する方法がわかりませんか？

これは、セルの行と列の両方を取得する確立された方法ですか?

これは特にページです: http://jonathanb.co.uk/papers/default.html

リンクのリストがあり、各セルはリンクに対応しています。行と列の並べ替えを許可するか、少なくとも一部を非表示にする予定です。現在JavaScriptでテーブルを作成していますが、これはphpでやったほうがいいと思います。

4

2 に答える 2

2

rowIndexand を使用して、テーブル セルの行と列を動的に取得できますcellIndex( という名前の要素があると仮定しますcell)。

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

デモ

-開発者コンソールの出力を参照してください-

クリック リスナーを追加するのは非常に簡単なはずです (jQuery を使用するかどうかによって異なります)。

于 2013-01-29T01:41:56.900 に答える
1

You can make the table clickable, and get the cell and row index of the target cell that you clicked.

<!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 に答える