Javascript 在按钮单击事件上复制行值

我试图提取一个特定的列值，并利用它编写了这段代码。但是在某个地方搞砸了/或者遗漏了一些概念

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

任何指导都会有所帮助。代码如下

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

HTML

<tr class="findVal">
<?php
    include("myIncludeFile");

    $result = mysql_query("myQuery");
    while($test = mysql_fetch_array($result))
    {
        echo "<td class=".'hidden-phone hidden-tablet hidden-desktop id'.">".$test['col_nm1']."</td>";
       /*Other table data from database
       ..............................*/ 
       echo"<td>".'<div class="checkbox">
            <label><input type="checkbox" name="total" id ="total" value="'.$test['col_nm2'].'"">'.$test['col_nm2'].'</label>
         </div>'."</td>";
       echo"<td>".'<button type="submit" id="approve" class="btn btn-success" onclick="checkTotal()">Approve</button>'."</td>";
       echo "</tr>";
    }
    mysql_close($conn);
?>
</tr>

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

JS

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

函数checkTotal（）{
var tr=$（this）.closest（'.findVal'）；
var findID=tr.find（'.id'）.text（）；
警惕（findID）；
}

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

---

注意：

在添加

之前，您似乎缺少了重要的

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

jQuery正在搜索类为

findVal

的元素，并将其分配给vrable

tr

。然后，它在该元素的后代中搜索类

id

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

在

while

循环的第一行中，添加jQuery正在查找的

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

while($test = mysql_fetch_array($result))
{
    echo "<tr class='findVal'>\n";

while（$test=mysql\u fetch\u数组（$result））
{
回音“\n”；

还有其他方法不需要jQuery或查找父元素并再次搜索它们的子元素

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

echo"<td><button type='submit' id='approve' class='btn btn-success' onclick='checkTotal({$test['col_nm1']})'>Approve</button>"</td>";

echo“批准”；

---

请注意，通过使用双引号，您可以直接在echo中传递变量，它们将由PHP进行计算。

echo“这是$id”

。当您拥有的不是简单的变量字符串时，最安全的做法是将变量用大括号括起来，让PHP一起计算

echo”这是{$row[1]['id']}“

在添加

之前，您似乎缺少了重要的

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

jQuery正在搜索类为

findVal

的元素，并将其分配给变量

tr

。然后，它在该元素的后代中搜索类

id

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

在

while

循环的第一行中，添加jQuery正在查找的

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

while($test = mysql_fetch_array($result))
{
    echo "<tr class='findVal'>\n";

while（$test=mysql\u fetch\u数组（$result））
{
回音“\n”；

还有其他方法不需要jQuery或查找父元素并再次搜索它们的子元素

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

echo"<td><button type='submit' id='approve' class='btn btn-success' onclick='checkTotal({$test['col_nm1']})'>Approve</button>"</td>";

echo“批准”；

---

请注意，通过使用双引号，您可以直接在echo中传递变量，它们将由PHP进行计算。

echo“这是$id”

。当您拥有的不是简单的变量字符串时，最安全的做法是将变量用大括号括起来，让PHP一起计算

echo”这是{$row[1]['id']}“

好的，因为您只需要提取名为

ID

的列，只需设置

的ID并使用函数调用它，假设您的

ID

是唯一的

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

<td id="<?= $db_result['id_column']; ?>"><?= $db_result['id_column']; ?></td>

最后：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

function checkTotal(id) {
    alert(id);
}

---

当然，有更好的方法，特别是如果你想提取一个不像ID那么简单和简短的值，但这可以提供一个快速的解决方案，因为你只需要提取名为

ID

的列，只要设置

的ID，并用你的函数调用它，假设你的

ID

是un伊克

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

<td id="<?= $db_result['id_column']; ?>"><?= $db_result['id_column']; ?></td>

最后：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

function checkTotal(id) {
    alert(id);
}

---

当然，有更好的方法，特别是如果你想提取一个不像ID那么简单和简短的值，这比这个方法要好，但这可以提供一个快速的解决方案，你只需爬回DOM树就可以了，这里似乎没有什么障碍

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

考虑到一行的结构如下：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

TR
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
     |- div
          |- label
               |- checkbox

附加到复选框的vanilla js处理程序可能如下所示：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

function onCbClicked(evt)
{
  var clickedElem = this;
  var label = clickedElem.parentNode;
  var containingDiv = label.parentNode;
  var clickedCell = containingDiv.parentNode;
  var containingRow = clickedCell.parentNode;

  var firstCell = containingRow.cells(0);
  var idString = firstCell.textContent;
  alert("Id of clicked row: " + idString);
}

这是一个有效的演示：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

函数newEl（tag）{returndocument.createElement（tag）}
函数newText（txt）{return document.createTextNode（txt）}
函数byId（id）{return document.getElementById（id）}
//适用于HtmlCollection、NodeList和字符串类型
函数forEach（array，callback，scope）{for（var i=0，n=array.length；i您可以爬回DOM树，对于这一点，这里似乎没有任何障碍

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

考虑到一行的结构如下：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

TR
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
     |- div
          |- label
               |- checkbox

附加到复选框的vanilla js处理程序可能如下所示：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

function onCbClicked(evt)
{
  var clickedElem = this;
  var label = clickedElem.parentNode;
  var containingDiv = label.parentNode;
  var clickedCell = containingDiv.parentNode;
  var containingRow = clickedCell.parentNode;

  var firstCell = containingRow.cells(0);
  var idString = firstCell.textContent;
  alert("Id of clicked row: " + idString);
}

这是一个有效的演示：

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>


函数newEl（tag）{returndocument.createElement（tag）}
函数newText（txt）{return document.createTextNode（txt）}
函数byId（id）{return document.getElementById（id）}
//适用于HtmlCollection、NodeList和字符串类型
函数forEach（数组、回调、作用域）{for（var i=0，n=array.length；iYou在开始使用
mysql\u*
函数时就弄糟了，这些函数已被弃用两年多，不再适用于PHP7+安装..是的，但这不是问题所在。表数据显示得很好，主要问题是从表
td
中提取
id
确定。具体如何如果你用“myQuery”替换了你的实际查询，我们应该告诉你出了什么问题吗？@icecub：为了你的问题，我上传了我的webApp的工作版本。我希望这会有所帮助。（我只是为了方便而缩短了代码）你真的应该试着远离不推荐使用的函数。它们会给你的应用程序带来严重和不必要的安全风险。我将在下面为你的具体问题给出答案。你开始使用
mysql\u*
函数时就把事情搞砸了，这些函数现在已经不推荐使用两年多了，不再适用于PHP 7+安装。是的，但这不是这里的问题。表数据显示得很好，主要问题是从表
td
中提取
id
。如果将实际查询替换为“