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>

我添加了按钮添加以在另一个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代码有问题，请检查查询是否返回valide结果并检查属性名称，例如'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>

获取表行的值并将其打印在另一个div中

1 个答案: