Question

这就是我现在所拥有的：

这是表格：

<table border='1'>

        <tr>
            <td>
                Employee Code
            </td>
            <td>
                FirstName
            </td>
            <td>
                LastName
            </td>
            <td>
                Address
            </td>
        </tr>

        <tr class='display' onclick='hello();' >
            <td id='trId1'>
                E100
            </td>
            <td>
                Alex
            </td>
            <td>
                Stone
            </td>
            <td>
                33 Wave Place
            </td>
        </tr>

        <tr class='display' onclick='hello();' >
            <td id='trId1'>
                E200
            </td>
            <td>
                Alex
            </td>
            <td>
                Stone
            </td>
            <td>
                33 Wave Place
            </td>
        </tr>

       -----> etc...
    </table>

这是javascipt

<script>
        function hello(){


            var r = document.getElementById("trId1").innerHTML;
            alert(r);
        }
    </script>

当点击第一行时，JavaScript获得E100是正确的但是当点击E200行时它仍显示E100，当有更多数据时，我将如何获得E200等等？是否只有一个javascript解决方案

Answer 1

首先，您不能在页面上有两个与HTML5无效相同的ID，并且会在某些浏览器中导致错误。你得到你得到的东西的原因是因为在寻找ID时，大多数浏览器只查找一次ID（因为这正是有效的HTML，每页1个唯一ID）。因此，要修复HTML代码，您可能还希望为表格设置标题：

   <table border='1'>
      <thead>
        <tr>
            <th>
                Employee Code
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Address
            </th>
        </tr>
       </thead>
       <tbody>
        <tr class='display' onclick='hello(1);' >
            <td class='trId1'>
                E100
            </td>
            <td>
                Alex
            </td>
            <td>
                Stone
            </td>
            <td>
                33 Wave Place
            </td>
        </tr>

        <tr class='display' onclick='hello(2);' >
            <td class='trId1'>
                E200
            </td>
            <td>
                Alex
            </td>
            <td>
                Stone
            </td>
            <td>
                33 Wave Place
            </td>
        </tr>

       -----> etc...
       </tbody>
    </table>

您最好的选择是getElementsByClassName函数并将数组遍历到您想要的数组。（一般更改，代码）假设您出于某种原因完全不能使用JQuery：

<script>
    function hello(rowClickedNumber){

        var RowClicked = document.getElementsByClassName("trId1");
        var r = RowClicked[0].innerHTML;
        alert(r); //E100
        var r = RowClicked[1].innerHTML;
        alert(r); //E200
        var r = RowClicked[rowClickedNumber].innerHTML;
        alert(r);
    }
</script>

但是，更简单的解决方案是使用JQuery并限制浏览器的不一致性。文档加载后：

 $(body).on("click", "tr", function(){ 
     var getData =$(this).children(".trId1").getHTML();
     console.log(getData);
 });

注意：这是允许当你不可避免地向表中添加更多项时（因此代码获取行的子元素的原因）。

*编辑：添加了注释

**编辑：修正了拼写和语法

* 编辑：修复了javascript函数。

Answer 2

我有一个解决方案。请检查下面的代码和小提琴链接。如果您有任何疑问，请与我联系。

<强> Fiddle

HTML：

<table border='1'>
    <tr>
        <td>
            Employee Code
        </td>
        <td>
            FirstName
        </td>
        <td>
            LastName
        </td>
        <td>
            Address
        </td>
    </tr>
    <tr class='display' onclick='hello(this);' >
        <td class='trId1'>
            E100
        </td>
        <td>
            Alex
        </td>
        <td>
            Stone
        </td>
        <td>
            33 Wave Place
        </td>
    </tr>
    <tr class='display' onclick='hello(this);' >
        <td class='trId1'>
            E200
        </td>
        <td>
            Alex
        </td>
        <td>
            Stone
        </td>
        <td>
            33 Wave Place
        </td>
    </tr>
</table>

JavaScript的：

function hello(obj){
    alert(obj.childNodes[1].innerText); //The first child being a text node.
}

如何从表格单元格中获取文本

2 个答案: