Question

我有一个简单的表填充了MySQL数据库中的行，HTML部分看起来像这样

  <tbody>
    <?php while($row = mysqli_fetch_row($result)){ ?>
    <tr class="rows" id="<?php echo $row[0]; ?>">  // the id is an auto incremented int
      <td id="col1"><?php echo $row[1]; ?></td>
      <td id="col2"><?php echo $row[2]; ?></td>
      <td id="col3"><?php echo $row[3]; ?></td>
      <td id="col4"><?php echo $row[4]; ?></td>
      <td id="col5"><?php echo $row[5]; ?></td>
    </tr>
    <?php } ?>
  </tbody>

它完成了工作，我有一个很好的表。现在我希望如果我点击一行，我会得到五个带有单元格值的变量。

阻止我的问题是获得<td>元素。这是我在外部javascript文件中尝试的内容：

var rows    = document.getElementsByClassName('rows');
for (var i=0; i<rows.length; i++){
    rows[i].onclick = function(){
        console.log(this.getElementById('col1')); // I tried to print it first
    }
}

控制台回答了这个问题：Uncaught TypeError: undefined is not a function。

然后我尝试了console.log(rows[i].getElementById(vonalkod));，但它回复了Uncaught TypeError: Cannot read property 'getElementById' of undefined

如果我只写console.log(this);那么它会打印出我期望的内容，即html中的整行。

所以我的问题是通过ID获取这些单元格的语法是什么？

Answer 1

获取单元格内容的方法是

document.getElementById('col1').innerHTML

现在，说过这个，只有你有一个col1才有效：如果你有多个<tr>个，那么每个td会有<td id=col1>个id 1}}，其他id-s也一样。这是无效的HTML。考虑用类替换那些id-s，或者用其他PHP替换。

或者，更好的是，你可以完全放弃所有这些笨拙的rows[i].onclick = function() { console.log(this.childNodes[0].innerHTML); // col1 console.log(this.childNodes[1].innerHTML); // col2 // ... etc } - 并使用类似的东西：

{{1}}

Answer 2

它不起作用，因为对象 this 是 HTMLTableRowElement （参见http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/html2/HTMLTableRowElement.html）

这里的jQuery库非常方便。使用jQuery编写的脚本就像

一样简单

jQuery('.rows').click(function(){
    alert(jQuery(this).children('#col1').text());
});

使用外部脚本在javascript中获取表格单元格的值

2 个答案: