Как получить данные ячейки из таблицы с помощью JavaScript

Question

Мне очень сложно провести время с моим веб-проектом. Потому что я новичок в веб-языках. Я просто хочу получить данные ячейки, нажав ту же кнопку строки другой ячейки. Я добавляю pic, пожалуйста, посмотрите это первым.

я стараюсь со многими кодами, как ниже --- (первая попытка)

мои 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); 
    } 

мой HTML код

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

мой стол данные содержат echo, потому что я сопоставляю данные таблицы с моим SQL-сервером.

моя вторая попытка ... код

расслоение плотной

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); 
    }  

и HTML-кода в ... первая одна работа для me.but, что не мой ожидаемого результата. Успех моего кода во втором результате. Но это не сработает. Когда я нажимаю каждую кнопку добавления, он дает мне только последнее значение последней строки второй ячейки, а это «ORACLE». ПОЖАЛУЙСТА СКАЖИТЕ МНЕ, ЧТО ЭТО случилось с моим кодом ......

Answer 1

проблема с вашим кодом является тот факт, что вы не связывании события кнопку, вы выбираете случайную ячейку строки таблицы. Другая проблема заключается в том, что вы не используете var, поэтому он делает вещи глобальными.

Вы сказали, что хотите нажать кнопку, но ваш код не выбирает кнопку. Поэтому вместо того, чтобы добавлять события повсюду, просто используйте один и дайте делегату события позаботиться об этом. Проверьте, что вызвало событие. Если это кнопка, чем выбрать строку, и вы можете прочитать текст ячеек.

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

Я сделал это путем присвоения ТД идентификатор и захвата текста с помощью JQuery

Answer 3

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

this означает «текущий контекст» , то есть cell, который создал событие click.

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

После того, как цикл, bf указывает на ячейку в последней строке, поэтому getval(bf) возвращает значение этого.

Чтобы получить доступ к соответствующей ячейке, выполните обход DOM, как предлагает @epascarello. В зависимости от вашего потребительной случае, это также может быть проще использовать атрибут данных:

<button data-value="Cisco"> 

, а затем в коде JS

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

Answer 4

Вы должны сначала определить, строка щелкнул, для этого вы можете проверить, какой элемент тока щелкнул путем добавления слушателя событий на всю таблицу и проверьте, когда цель кнопки.

Как только вы получаете целевую цель в качестве кнопки, найдите ее родительский td и его родительский tr.

Теперь вы получили ВУ и только через петлю дочерних узлов, исключить NODETYPE == 3, так что вы получите только элемент TD в тр

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>