堆棧內存溢出
  簡體   English   中英

使用 JavaScript 從 HTML 表格中獲取特定單元格值

[英]Get a particular cell value from HTML table using JavaScript

 原文  2010-11-23 07:05:03  0   10    javascript/ html

問題描述

我想在按下提交按鈕時使用 JavaScript 從 HTML 表格中獲取每個單元格值。

如何獲取 HTML 表格單元格值？

10 個解決方案

解決方案1
 45 已采納  2010-11-23 07:34:27

要從此單元格中獲取文本-

<table>
    <tr id="somerow">
        <td>some text</td>            
    </tr>
</table>

你可以用這個——

var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);

解決方案2
 5  2013-06-11 08:38:12

function Vcount() {
var modify = document.getElementById("C_name1").value;
var oTable = document.getElementById('dataTable');
var i;
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++) {
    var oCells = oTable.rows.item(i).cells;
    if (modify == oCells[0].firstChild.data) {
        document.getElementById("Error").innerHTML = "  * duplicate value";
        return false;
        break;
    }

}

解決方案3
 4  2014-05-06 21:01:18

var table = document.getElementById("someTableID"); 
var totalRows = document.getElementById("someTableID").rows.length;
var totalCol = 3; // enter the number of columns in the table minus 1 (first column is 0 not 1)
//To display all values
for (var x = 0; x <= totalRows; x++)
  {
  for (var y = 0; y <= totalCol; y++)
    {
    alert(table.rows[x].cells[y].innerHTML;
    }
  }
//To display a single cell value enter in the row number and column number under rows and cells below:
var firstCell = table.rows[0].cells[0].innerHTML;
alert(firstCell);
//Note:  if you use <th> this will be row 0, so your data will start at row 1 col 0

解決方案4
 2  2012-07-25 14:40:53

即使單擊單元格，您也可以使用 JS 獲取單元格值：

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

      <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=Course 類型的對象，它有兩個屬性：id、title。 課程是課程對象的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 之后和標識符旁邊。

我告訴你以防萬一你想使用它，因為我搜索了很多，我發現了像我這樣的問題。 但是現在我從老師那里知道了，所以我在人們問的地方張貼。

這個例子是有效的。我見過。

解決方案5
 2  2015-12-23 10:11:59

只是簡單.. #sometime 當更大的表我們不能將 id 添加到每個 tr

     <table>
        <tr>
            <td>some text</td>
            <td>something</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hel</td>
        </tr>
    </table>

    <script>
        var cell = document.getElementsByTagName("td"); 
        var i = 0;
        while(cell[i] != undefined){
            alert(cell[i].innerHTML); //do some alert for test
            i++;
            }//end while
    </script>

解決方案6
 2  2011-12-16 14:07:47

也可以使用DOM方式獲取單元格值： Cells[0].firstChild.data

在我在http://js-code.blogspot.com/2009/03/how-to-change-html-table-cell-value.html 上的帖子中閱讀更多相關信息

解決方案7
 1  2013-08-12 09:01:22

<td class="virtualTd" onclick="putThis(this)">my td value </td>

function putThis(control) { 
    alert(control.innerText);
}

解決方案8
 0  2018-03-03 15:18:29

我發現這是添加 row 的最簡單方法。 令人敬畏的是，即使它包含輸入元素，它也不會更改已經存在的表格內容。

row = `<tr><td><input type="text"></td></tr>`
$("#table_body tr:last").after(row) ;

這里#table_body是表體標簽的id。

解決方案9
 0  2020-02-15 18:29:49

這可能是獲取單個單元格值的最簡單方法。

document.querySelector("#table").children[0].children[r].children[c].innerText

其中 r 是行索引，c 是列索引

因此，要獲取所有單元格數據並將其放入多維數組中：

var tableData = [];  
Array.from(document.querySelector("#table").children[0].children).forEach(function(tr){tableData.push(Array.from(tr.children).map(cell => cell.innerText))}); 
var cell = tableData[1][2];//2nd row, 3rd column

要訪問此多維數組中特定單元格的數據，請使用標准語法：array[rowIndex][columnIndex]。

解決方案10
 -1  2019-05-08 08:06:45

制作一個javascript函數

function addSampleTextInInputBox(message) {
    //set value in input box
    document.getElementById('textInput').value = message + "";
    //or show an alert
    //window.alert(message);
}

然后只需調用您的表格行按鈕單擊

<td class="center">
    <a class="btn btn-success" onclick="addSampleTextInInputBox('<?php echo $row->message; ?>')" title="Add" data-toggle="tooltip" title="Add">
        <span class="fa fa-plus"></span>
    </a>
</td>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用javascript從動態表中獲取特定的單元格值 JavaScript 從 HTML 表格單元格中獲取值 Javascript從html表的特定行中獲取列的文本值 如何使用JavaScript從HTML表格中獲取特定單元格的值 如何使用javascript連續獲取HTML表格單元格上的Dropdownlist值 使用 Javascript 從 HTML 表格輸入單元格中獲取值 從html表格單元格獲取內容值，並使用javascript將其顯示在文本框中 有沒有辦法只使用javascript從html表格行中的第一個單元格獲取值？ 如何使用JavaScript從表中獲取單元格值？ 使用 Javascript 單擊時從單元格表中獲取第二個子值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM