如何從表格單元格獲取文本

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

我對此有一個解決方案。 請檢查下面的代碼和小提琴鏈接。 如果您有任何問題，請告訴我。

小提琴

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