1. 首页
  2. 问答
  3. 如何使用JavaScript获取HTML TABLE表格单元值？

如何使用JavaScript获取HTML TABLE表格单元值？

2010-11-23 93 views

回答

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

来源

2010-11-23 07:34:27 pavanred

+2

感谢您的回复 – Saravanan 2010-11-23 07:52:44

+0

以及如何获取列名和行名？ – 2017-04-12 13:59:53

+0

为此永远搜索。谢谢！！！ – snapper 2017-10-16 19:49:42

2

您可以获得单元格的值在我的岗位更多上与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 =具有2个属性的课程类型的对象：标识，标题。 课程是课程对象的ArrayList。

HTML表格显示每个单元格中的所有课程标题。所以该表只有1个柱： Course1 Course2 Course3 ...... 以一旁：

onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"

这意味着用户选择了一个表格单元格之后，例如 “Course2”，获得标题的课程 - “课程2”将前往网址指向用户的页面：http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp。 “Course2”将到达FoundS.jsp页面。 “Course2”的标识符是courseId。要声明变量courseId，其中CourseX将保留，您将一个“？”在URL之后并且在它旁边是标识符。

我告诉过你，如果你想使用它，因为我搜索了很多，我发现了像我这样的问题。但是现在我从老师那里找到了，所以我发布了人们问的地方。

该示例正在运行。我已经看到了。

来源

2012-07-25 14:40:53 Dia

5 
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; 
    } 

}

来源

2013-06-11 08:38:12 Subodh

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

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

来源

2013-08-12 09:01:22 user2674337

1 
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

来源

2014-05-06 21:01:18 Gnomagik

1

只需简单.. #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>

来源

2015-12-23 10:11:59

0

，我发现这是增加一个最简单的方法排。关于这一点真棒的是，即使它包含输入元素，它也不会改变已经存在的表格内容。

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

这里#table_body是表体标签的ID。

来源

2018-03-03 15:18:29

相关问题

 相关问题