如何使用JavaScript从表中获取任何特定的列数据？

Question

我有一个表，可以从数据库中提取数据。 在同一张表中，我有两个按钮。 通过按下任一按钮，我想获取所有特定的列数据。 我尝试了几种方法。 请参见下面的代码。

产生上表的HTML和PHP：

    <table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:20%;">Vendor Picture Path</th>
  <th style="width:20%;">Vendor Heading</th>
  <th style="width:20%;">Vendor Adding Date</th>
  <th style="width:20%;">Vendor Body</th>
  <th style="width:10%;">Add A Course</th>
  <th style="width:10%;">Add A Batch</th>
</tr>
<?php

mysql_connect("hist", "user", "pass")or die("cannot connect to server"); 
    mysql_select_db("name")or die("cannot select DB");
    $sql = "query";
    $result = mysql_query($sql);

    while($row=mysql_fetch_assoc($result))
    {
         echo '<tr>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["pic_path"].'</div></td>             
         <td><div onclick="getval(this)" class="cventablehead" id="ventablehead" style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll; cursor: pointer; color:red;">'.$row["heading"].'</div></td>
         <td>'.$row["adding_date"].'</td>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
         <td><button onclick="addcourse(this)">Add</button></td>
         <td><button onclick="addbatch(this)">Add</button></td>
         </tr>';
    }
?>
  </table>
</div>

JavaScript： 每种警报都是我尝试失败的一种不同方式

  function addcourse(obj)
  {
    alert(obj.querySelector('#ventablehead').innerHTML);
    alert(obj.getElementsByClassName("cventablehead").innerHTML);
    alert(obj.getElementsByClassName("cventablehead")[0].innerHTML);
  }

Answer 1

您应该为每个HTML元素指定一个特定的ID：

mysql_connect("hist", "user", "pass")or die("cannot connect to server"); 
mysql_select_db("name")or die("cannot select DB");
$sql = "query";
$result = mysql_query($sql);
$i = 0;

while($row=mysql_fetch_assoc($result))
{
     echo '<tr>
     <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["pic_path"].'</div></td>             
     <td><div onclick="getval(this)" class="cventablehead" id="ventablehead_'.$i'" style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll; cursor: pointer; color:red;">'.$row["heading"].'</div></td>
     <td>'.$row["adding_date"].'</td>
     <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
     <td><button onclick="addcourse('.$i.')">Add</button></td>
     <td><button onclick="addbatch(this)">Add</button></td>
     </tr>';
     $i++;
}
?>
  </table>
</div>


function addcourse(index) {
    alert(document.getElementById('#ventablehead_'+index).innerHTML);
}

Answer 2

将“单元格内容”属性添加到按钮，以指定要从中获取数据的列：

<td><button type="button" class="addcourse" cell-content="1">Add</td>

并将一个侦听器附加到您的按钮上：

<script type="text/javascript">
    var btns = document.getElementsByClassName('addcourse');

    var findAncestor = function (el, sel) {
        while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
        return el;
    };

    var getCellContent = function (row, cellIndex) {
        return row.cells[cellIndex].firstChild.innerHTML;
    };

    var onClick = function() {
        // Find <tr> ancestor of the clicked button
        var row = findAncestor(this, 'tr');

        var data = getCellContent(row, this.getAttribute('cell-content'));

        console.log(data);
    };

    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', onClick, false);
    }
</script>