如何使用JavaScript从表中获取单元格数据

Question

i am passing a very hard time with my web project.because i am new with web related languages. i just want to get data of a cell by clicking the same row button of the other cell. i am adding a pic please see this first.

i try with many codes like below---(1st try)

my js code-

var tbl = document.getElementById("myTable");
        if (tbl != null) {

        for (var i = 0; i < tbl.rows.length; i++) {

                tbl.rows[i].cells[1].onclick = function (){ getval(this); };
        }
    }
    function getval(cell) {
    value(cell.innerHTML);
    }

my html code

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:25%;">Vendor Picture Path</th>
  <th style="width:25%;">Vendor Heading</th>
  <th style="width:25%;">Vendor Body</th>
  <th style="width:25%;">Add courses</th>
</tr>

         echo '<tr>
         <td>'.$row["pic_path"].'</td>
         <td style="cursor: pointer;color:red;">'.$row["heading"].'</td>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
         <td><button>Add</button></td>                 
         </tr>';

my table data contains echo because i fatch the table data from my sql server.

my second try... js code

var tb2=document.getElementById("myTable");
        if(tb2 != null)
    {
        for(h=0;h<tb2.rows.length;h++)
        {
            bf=tb2.rows[h].cells[1];
            tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};
        }
    }

             function getbtval(cell)
    {
       alert(cell.innerHTML);
    }     

and html code same... 1st one work for me.but that was not my expected result. my code success on second one result.but that fails.when i click every add button it gives me just the last value of 2nd cell last row and that is "ORACLE". PLEASE TELL ME WHAT IS WRONG WITH MY CODE......

Answer 1

Problem with your code is the fact you are not binding events to the button, you are picking a random cell of the table row. And the other issue is the fact you are not using var so it makes things global.

You said you want to click the button, but your code is not selecting the button. So instead of adding events all over the place, just use one and let event delegation take care of it. Check to see what triggered the event. If it is a button, than select the row and than you can read the text of the cells.

 document.getElementById("myTable").addEventListener("click", function(evt) { var btn = evt.target; if(btn.tagName==="BUTTON"){ var row = btn.parentNode.parentNode; //td than tr var cells = row.getElementsByTagName("td"); //cells console.log(cells[0].textContent, cells[1].textContent); } }); 

 <table class="w3-table-all w3-margin-top" id="myTable"> <tr> <th style="width:25%;">Vendor Picture Path</th> <th style="width:25%;">Vendor Heading</th> <th style="width:25%;">Vendor Body</th> <th style="width:25%;">Add courses</th> </tr> <tr> <td>123</td> <td style="cursor: pointer;color:red;">YYYY</td> <td> <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">XXX</div> </td> <td> <button>Add</button> </td> </tr> <tr> <td>456</td> <td style="cursor: pointer;color:red;">dasdas</td> <td> <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">qwwqeqwe</div> </td> <td> <button>Add</button> </td> </tr> </table> 

Answer 2

cell.onclick = function (){ getval(this); };

this means "current context", that is the cell which produced the click event.

bf=tb2.rows[h].cells[1];
tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};

After the for loop, bf points to the cell in the last row, so getval(bf) returns the value of it.

To access the proper cell, do the DOM traversal as @epascarello suggests. Depending on your use-case, it also might be easier to use data attribute:

<button data-value="Cisco">

And then in the JS code

button.onclick = function() { alert(this.dataset.value); }

Answer 3

You need to first identify the row clicked, for this you can check which element is current clicked by adding an event listener on the entire table and check when the target is button.

Once you get the event target as button , find its parent td and its parent tr.

Now you got the tr and just loop through the child nodes, exclude the nodeType == 3 so that you only get the td element in the tr

 document.getElementById("myTable").addEventListener("click",function(e){ e = e || event var target = e.target || e.srcElement; if (target.nodeName != 'BUTTON') return var row = target.parentNode.parentNode; row.childNodes.forEach(function(item){ if(item.nodeType !== 3) { console.log(item.textContent); console.log(item.innerHTML); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="w3-table-all w3-margin-top" id="myTable"> <tr> <th style="width:25%;">Vendor Picture Path</th> <th style="width:25%;">Vendor Heading</th> <th style="width:25%;">Vendor Body</th> <th style="width:25%;">Add courses</th> </tr> <tr> <td>cisco-networking.jpg</td> <td style="cursor: pointer;color:red;">CISCO</td> <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">CISCO systems</div></td> <td><button>Add</button></td> </tr> </table> 

Answer 4

我通过为td指定一个id并使用jquery抓取文本来完成此操作