Q:

How to Get text from table cell

This is what i have right now:
This is the table:
<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>

This is the javascipt
<script>
        function hello(){

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

The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution  

A:

To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because  when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table: 
   <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>

Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<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>

However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads: 
 $(body).on("click", "tr", function(){ 
     var getData =$(this).children(".trId1").getHTML();
     console.log(getData);
 });

Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row). 
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.

