javascript - 获取表格行的值并将它们打印在另一个 div 中

Question

我正在从数据库中检索值并将它们打印在表中。现在我想获取另一个 div 的值并将它们放在表单中。

我正在使用 Twitter Bootstrap 。

首先我从数据库中获取值并将它们打印到表中

<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
    <thead>
      <tr class="bg-red">
        <th>Id</th>
        <th>Name</th>
        <th>Quality</th>
        <th>Dimensions</th>
        <th>COlor</th>
        <th>Add</th>
      </tr>
    </thead>
    <tbody>
    <?php
    while($r=$q->fetch()){ ?>
    <tr>
      <td><?='Nb'. $r['Id']?> </td>
      <td> <?=$r['MatVrstaNaziv']?> </td>
      <td><?=$r['Quality']?></td>
      <td><?=$r['Width'] . '  X  '. $r['Height']?></td>
      <td><?=$r['COlor']?></td>
      <td> <button class="addValues" value="<?='Nb'. $r['Id']?> "> Add</button></td>
    </tr>
    <?php } ?>
    </tbody>
</table>
</div>

<div class="col-xs-2">
<div id="selection">

</div>

</div>

我添加了按钮 Add 以将该行添加到另一个 div 中。为此，我正在使用脚本

<script>
    $(function () {
        $(".addValues").click(function () {
        var $this = $(this),
        myCol = $this.closest("td"),
        myRow = myCol.closest("tr"),
        targetArea = $("#selection");
        targetArea.append(myRow.children().not(myCol).text() + "<br />");
    });
    });
</script>

此脚本不起作用，它不会在指定的 div 中打印值。我只想在另一个 div 中打印 id 号。

谁能告诉我哪里出了问题？

Answer 1

当您在选择器 $(".addValues") 中的 addValues 之前添加 . 时，请参阅下面的静态数据示例。

如果仍然无法正常工作，则表示您的 PHP 代码有问题，请检查查询是否返回有效结果并检查属性名称，例如 'COlor'。

$(".addValues").click(function () {
	$('#selection').show();

    var $this = $(this),
    myCol = $this.closest("td"),
    myRow = myCol.closest("tr"),
    targetArea = $("#selection");
    var rowId = $("td.data-id", myRow).text();

	var qte_input = (' <input type="text" placeholder="Qte" size="5"/>');
    targetArea.prepend(rowId + qte_input +"<br />");
});

table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
    <thead>
      <tr class="bg-red">
        <th>Id</th>
        <th>Name</th>
        <th>Quality</th>
        <th>Dimensions</th>
        <th>COlor</th>
        <th>Add</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td class='data-id'> 1</td>
      <td> bb</td>
      <td> ccc</td>
      <td> dd  X  '. dd</td>
      <td> ee</td>
      <td> <button class="addValues" value="fff"> Add</button></td>
    </tr>
    <tr>
      <td class='data-id'>2</td>
      <td> YYY</td>
      <td> ccc</td>
      <td> dd  X  '. dd</td>
      <td> ee</td>
      <td> <button class="addValues" value="fff"> Add</button></td>
    </tr>
    <tr>
      <td class='data-id'>3</td>
      <td> XXX</td>
      <td> ccc</td>
      <td> dd  X  '. dd</td>
      <td> ee</td>
      <td> <button class="addValues" value="fff"> Add</button></td>
    </tr>
    </tbody>
</table>
</div>

<div class="col-xs-2">
<div id="selection" style="display: none">
    </br>
    <button class="submitValues">Submit</button>
</div>

</div>