web-dev-qa-db-ja.com

JavaScriptでHTMLテーブルのTdセル値を取得する方法は？

動的データで作成されたHTMLテーブルがあり、その中の行数を予測できません。私がしたいのは、行がクリックされたときにセルの値を取得することです。 td onclickを使用することは知っていますが、Javascript関数のセル値にアクセスする方法がわかりません。

セルの値は、実際にはレコードのインデックスであり、テーブルに隠されています。レコードキーが見つかったら、dbからレコード全体を取得できます。

クリックしたテーブルの行インデックスと列インデックスがわからない場合、セル値を取得する方法は？

javascripthtml-tablecell
12
user661684

インライン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>_

JS Fiddle概念実証 。

コメントへの対応としての改訂されたアプローチ（ below ）：

セミコロンがありません。また、ループ内で関数を作成しないでください。

このリビジョンは、複数の_<td>_要素のclickイベントハンドラーとして（単一の）名前付き関数をバインドし、ループ内に複数の匿名関数を作成する不必要なオーバーヘッドを回避します（これは、メモリの使用による繰り返しとパフォーマンスへの影響）：

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

JS Fiddle概念実証 。

参照：

13
David Thomas

これは私の解決策です

var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
    console.log("My contents is \"" + cells[i].innerHTML + "\"");
}
5
pbfy0

次を使用できます。

<td onclick='javascript:someFunc(this);'></td>

thisを渡すと、関数パラメーターを介してDOMオブジェクトにアクセスできます。

1
Afshin Mehrabani

.......................

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

JSPでHTMLテーブルを作成しました。 コースはタイプです。たとえば、Course cs、cs = 2つの属性id、titleを持つCourseタイプのオブジェクト。 coursesは、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の後に、その隣に識別子。できます。

0
Dia

私はそれを見つけることができるようにテーブルにIDを与えました。 onload（ページがブラウザーによってロードされるとき）で、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>
0
Tom