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

I have a table into which data is fetched from database. In the same table I have two buttons. By pressing either button I want to get all specific column data. I tried several ways. See code below.

我有一个表从数据库中获取数据。在同一张桌子上,我有两个按钮。按任一按钮我想获得所有特定的列数据。我尝试了几种方法。见下面的代码。

HTML & PHP that produce above table:

产生上表的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: Each alert is a different way I tried without success

JavaScript:每次提醒都是我尝试过的不同方式

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

2 个解决方案

#1

You should have a specific id for each HTML element:

您应该为每个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);
}

#2

Add "cell-content" attribute to your button to specify the column you want to get data from:

将“cell-content”属性添加到按钮以指定要从中获取数据的列:

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

And attach a listener to your buttons:

并为您的按钮添加一个监听器:

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

#1