Question

我是html和javascript的新手。

每当用户使用javascript点击表格行时，我想获取元素的内容。

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">rlucero@test.com</td>
        </tr>
    </tbody>

 </table>
</body>
</html>

每当我点击该行时，它会显示undefined undefined undefined。我知道我的代码是错的，但我真的不知道如何解决这个问题。有人能帮帮我吗。我对这件事很新。提前谢谢。

Answer 1

您需要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>

如果你还没有使用它，你可能也想查看jQuery，它使用Javascript更轻松地选择和操作HTML。

Answer 2

尝试将value更改为innerHTML

Answer 3

尝试将值更改为 innerHTML 或 innerText

document.forms[0].getElementsByTagId("pName").innerText;

Answer 4

<td>代码没有值。

改为使用document.getElementById("pName").innerHTML。

Answer 5

我也经常搜索。最后我看到了教学的解决方案。这是一个有效的例子：

    ...........
  <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>
           <%}%>

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

学生是一个ArrayList，包含Student（studentId，name）类型的对象。该表显示了所有学生。为您单击一个单元格，单击查看源。你会看到：

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

在我的情况下，“1”。我还没有制作目的地页面。

如何使用javascript获取html值？

5 个答案: