動的データで作成された HTML テーブルがあり、その中の行数を予測できません。私がやりたいことは、行がクリックされたときにセルの値を取得することです。td onclick を使用することは知っていますが、Javascript 関数でセル値にアクセスする方法がわかりません。
セルの値は実際にはレコードのインデックスであり、テーブルには隠されています。レコード キーが見つかったら、db からレコード全体を取得できます。
クリックしたテーブルの行インデックスと列インデックスがわからない場合、セルの値を取得するにはどうすればよいですか?
インライン JavaScript を使用せず、動作をデータから分離すると、処理がはるかに簡単になります。次のことをお勧めします。
var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function(){
console.log(this.innerHTML);
/* if you know it's going to be numeric:
console.log(parseInt(this.innerHTML),10);
*/
}
}
var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i = 0, len = cells.length; i < len; i++) {
cells[i].onclick = function() {
console.log(this.innerHTML);
};
}th,
td {
border: 1px solid #000;
padding: 0.2em 0.3em 0.1em 0.3em;
}<table id="tableID">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
<th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>43</td>
<td>23</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>98</td>
</tr>
<tr>
<td>10</td>
<td>32</td>
<td>7</td>
<td>2</td>
</tr>
</tbody>
</table>コメント（以下）に応じて、改訂されたアプローチ：
セミコロンがありません。また、ループ内で関数を作成しないでください。
このリビジョンでは、(単一の) 名前付き関数をclick複数の要素のイベント ハンドラーとしてバインドし<td>、ループ内で複数の無名関数を作成するという不必要なオーバーヘッドを回避します (これは、繰り返しと、メモリ使用量によるパフォーマンスへの影響により、不適切な方法です) ):
function logText() {
// 'this' is automatically passed to the named
// function via the use of addEventListener()
// (later):
console.log(this.textContent);
}
// using a CSS Selector, with document.querySelectorAll()
// to get a NodeList of <td> elements within the #tableID element:
var cells = document.querySelectorAll('#tableID td');
// iterating over the array-like NodeList, using
// Array.prototype.forEach() and Function.prototype.call():
Array.prototype.forEach.call(cells, function(td) {
// the first argument of the anonymous function (here: 'td')
// is the element of the array over which we're iterating.
// adding an event-handler (the function logText) to handle
// the click events on the <td> elements:
td.addEventListener('click', logText);
});
function logText() {
console.log(this.textContent);
}
var cells = document.querySelectorAll('#tableID td');
Array.prototype.forEach.call(cells, function(td) {
td.addEventListener('click', logText);
});th,
td {
border: 1px solid #000;
padding: 0.2em 0.3em 0.1em 0.3em;
}<table id="tableID">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
<th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>43</td>
<td>23</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>98</td>
</tr>
<tr>
<td>10</td>
<td>32</td>
<td>7</td>
<td>2</td>
</tr>
</tbody>
</table>参考文献:
これが私の解決策です
var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
console.log("My contents is \"" + cells[i].innerHTML + "\"");
}
次を使用できます。
<td onclick='javascript:someFunc(this);'></td>
これを渡すと、関数パラメーターを介してDOMオブジェクトにアクセスできます。
...................................
<head>
<title>Search students by courses/professors</title>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight){
tableRow.style.backgroundColor = '00CCCC';
}
else{
tableRow.style.backgroundColor = 'white';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
<% for (Course cs : courses){ %>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">
<td name = "title" align = "center"><%= cs.getTitle() %></td>
</tr>
<%}%>
........................
</body>
HTMLテーブルをJSPで書きました。 コースはタイプです。たとえば、Course cs, cs= タイプ Course のオブジェクトで、id、title の 2 つの属性がありました。 courseは Course オブジェクトの ArrayList です。
HTML テーブルには、各セルにすべてのコース タイトルが表示されます。したがって、テーブルには 1 つの列しかありません: Course1 Course2 Course3 ...... 脇に置いてください:
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"
これは、ユーザーが「Course2」などの表のセルを選択した後、コースのタイトル「Course2」が、URL がユーザーを誘導しているページに移動することを意味しますhttp://localhost:8080/Mydata/ComplexSearch/FoundS.jsp 。「Course2」が FoundS.jsp ページに到着します。「Course2」の識別子は courseId です。CourseX が保持される変数 courseId を宣言するには、「?」を入力します。URL の後に識別子が続きます。できます。
テーブルを見つけられるように、テーブルにIDを付けました。オンロード時 (ブラウザーによってページが読み込まれるとき) に、テーブルのすべての行に onclick イベント ハンドラーを設定します。これらのハンドラーは、最初のセルの内容を警告します。
<!DOCTYPE html>
<html>
<head>
<script>
var p = {
onload: function() {
var rows = document.getElementById("mytable").rows;
for(var i = 0, ceiling = rows.length; i < ceiling; i++) {
rows[i].onclick = function() {
alert(this.cells[0].innerHTML);
}
}
}
};
</script>
</head>
<body onload="p.onload()">
<table id="mytable">
<tr>
<td>0</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>1</td>
<td>row 2 cell 2</td>
</tr>
</table>
</body>
</html>