如何使用 javascript 获取 html <td> 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7830469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get html <td> values using javascript?
提问by NinjaBoy
Im very new to html and javascript.
我对 html 和 javascript 很陌生。
I want to get the content of element whenever the user click on a table row using javascript.
每当用户使用 javascript 单击表格行时，我都想获取元素的内容。
test.html
test.html
<html>
<head>
<script text="text/javascript">
function dispTblContents() {
var pName = document.getElementById("pName").value;
var pAddress = document.getElementById("pAddress").value;
var pEmail = document.getElementById("pEmail").value;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr onclick="dispTblContents();" >
<td id="pName">Ricardo Lucero</td>
<td id="pAddress">Mexico City, Mexico</td>
<td id="pEmail">[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>
Whenever I click the row it displays undefined undefined undefined. I know my code is wrong but I really don't how to fix this. Can somebody please help me. Im very new to this thing. Thanks in advance.
每当我单击它显示的行时undefined undefined undefined。我知道我的代码是错误的，但我真的不知道如何解决这个问题。有人能帮帮我吗。我对这件事很陌生。提前致谢。
回答by mikel
You need innerHTMLnot valuehere, valueis used for form elements.
你需要innerHTML不是value在这里，value用于表单元素。
<script text="text/javascript">
function dispTblContents() {
var pName = document.getElementById("pName").innerHTML;
var pAddress = document.getElementById("pAddress").innerHTML;
var pEmail = document.getElementById("pEmail").innerHTML;
alert(pName + " " + pAddress + " " + pEmail);
}
</script>
You might also want to look into jQuery if you're not using it yet, it makes selecting and manipulating HTML with Javascript a lot easier.
如果您还没有使用 jQuery，您可能还想了解它，它使使用 Javascript 选择和操作 HTML 变得更加容易。
回答by Mr.J4mes
Try change valueto innerHTML
尝试更改value为innerHTML
回答by Seralize
Try to change valueto innerHTMLor innerText
尝试将值更改为innerHTML或innerText
document.forms[0].getElementsByTagId("pName").innerText;
回答by Dennis
A <td>tag doesn't have a value.
一个<td>标签不具有价值。
Use document.getElementById("pName").innerHTMLinstead.
使用document.getElementById("pName").innerHTML来代替。
回答by Dia
I searched a lot for it too. Finally I get to see teaches's solution. This is an example that works:
我也搜索了很多。最后我看到了教的解决方案。这是一个有效的例子：
...........
<head>
<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>
<% ArrayList<Student> students = StudentsManager.getInstance().getStudents(); %>
<body>
Choose a student <br>
<table>
<tr>
<td>
<table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
<% for (Student st : students){ %>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=<%=st.getStudentId()%>');">
<td name = "title" align = "center"><%= st.getStudentId() %></td>
</tr>
<%}%>
...............
studentsis an ArrayList that contains objects of type Student(studentId, name). The table displays all the students. Befor you click on a cell, click view source. You'll see:
学生是包含类型学生（studentId，名称）的对象的ArrayList。该表显示了所有学生。单击单元格之前，单击查看源代码。你会看到的：
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=1');">
<td name = "title" align = "center">1</td>
</tr>
Well in my case was "1". I didn't make the destination page yet.
那么在我的情况下是“1”。我还没有制作目标页面。
