如何通過 JavaScript 獲取 html 表格 td 單元格值？

Question

我有一個用動態數據創建的 HTML 表，無法預測其中的行數。 我想要做的是在單擊一行時獲取單元格的值。 我知道使用 td onclick 但我不知道如何訪問 Javascript function 中的單元格值。

單元格的值實際上是一條記錄的索引，隱藏在表中。 找到記錄鍵后，我可以從數據庫中檢索整個記錄。

如果我不知道我點擊的表格的行索引和列索引，如何獲取單元格值？

Answer 1

不要使用內聯 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 概念驗證。

修改后的方法，以回應評論（如下）：

你少了一個分號。 另外，不要在循環中創建函數。

此修訂綁定了一個名為 function 的（單個）作為多個<td>元素的click事件處理程序，並避免了在循環中創建多個匿名函數的不必要開銷（由於重復和對性能的影響，這是一種不好的做法，由於 memory 的使用）：

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 概念驗證。

參考：

Answer 2

這是我的解決方案

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

Answer 3

您可以使用：

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

通過此參數，您可以通過 function 參數訪問 DOM object。

Answer 4

我給了表一個 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>

Answer 5

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

  <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= object，類型為 Course，它有 2 個屬性：id、title。 courses是一個 ArrayList 的 Course 對象。

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 之后和旁邊的標識符。 有用。

如何通過 JavaScript 獲取 html 表格 td 單元格值？

問題描述

5 個解決方案

解決方案1
13 2012-04-07 18:47:32

解決方案2
5 2012-04-07 20:37:55

解決方案3
1 2012-04-07 18:42:56

解決方案4
0 2012-04-07 18:55:46

解決方案5
0 2012-07-25 14:58:00

如何通過 JavaScript 獲取 html 表格 td 單元格值？

問題描述

5 個解決方案

解決方案1 13 2012-04-07 18:47:32

解決方案2 5 2012-04-07 20:37:55

解決方案3 1 2012-04-07 18:42:56

解決方案4 0 2012-04-07 18:55:46

解決方案5 0 2012-07-25 14:58:00

解決方案1
13 2012-04-07 18:47:32

解決方案2
5 2012-04-07 20:37:55

解決方案3
1 2012-04-07 18:42:56

解決方案4
0 2012-04-07 18:55:46

解決方案5
0 2012-07-25 14:58:00