Question

我有一个表，该表中的数据来自数据库。我想单击此行并将其转移到其他表。我可以使用输入复选框转移此行。我会意识到，只需单击而不选中复选框，即可轻松便捷地传输行。我很难将其转换为可点击而不是复选框。

我尝试使用此代码

$(document).ready(function() {
    $( "#table1 tbody tr" ).on( "click", function( event ) {
        var product = $(this).attr('data-product');
        var price = $(this).attr('data-price');
        var barcode = $(this).attr('data-barcode');
        var unit = $(this).attr('data-unt');
        var qty = prompt("Enter number of items",1);
        var total = qty*price;

        $('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});

这是我要转换为可点击代码的jquery。

    function add(){
         $('input:checked[name=tab1]').each(function() {
         var product = $(this).attr('data-product');
         var price = $(this).attr('data-price');
         var barcode = $(this).attr('data-barcode');
         var unit = $(this).attr('data-unt');
         var qty = prompt("Enter number of items",1);
         var total = qty*price;

         $('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>"); });}

我的PHP代码。

<?php
include('server/connection.php');

if (isset($_POST['products'])){

    $name = mysqli_real_escape_string($db,$_POST['products']);
    $num = 1;
    $show   = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
    $query  = mysqli_query($db,$show);
    if(mysqli_num_rows($query)>0){
        while($row = mysqli_fetch_array($query)){
            $total = $num*$row['sell_price'];
            echo "<tr id='sas'><td>".$row['id']."</td><td>".$row['product_name']."</td>";
            echo "<td>₱".$row['sell_price']."</td>";
            echo "<td>".$row['unit']."</td>";
            echo "<td>".$row['quantity']."</td>";
            echo "<td><input type='checkbox' name='tab1' data-barcode='".$row['id']."' data-product='".$row['product_name']."' data-price='".$row['sell_price']."' data-unt='".$row['unit']."' data-qty='".$num."' data-total='".$total."'/></td></tr>";
        }
    }
    else{
        echo "<td></td><td>No Products found!</td><td></td>";
    }
}

我的桌子

<table id="table1">
   <thead>
      <tr>
         <td>Barcode</td>
         <td>Product Name</td>
         <td>Price</td>
         <td>Unit</td>
         <td>Stocks</td>
         <td>Action</td>
      </tr>
   </thead>
   <tbody id="products">
   </tbody>
</table>
<table id="table2">
   <thead>
      <tr>
         <th>Barcode</th>
         <th>Description</th>
         <th>Price</th>
         <th>Unit</th>
         <th>Qty</th>
         <th>Sub.Total</th>
      </tr>
   </thead>
   <tbody id="tableData">
   </tbody>
</table>

我希望通过单击行将自动将其转移到带有对话框的对话框中的表2，该提示将询问产品的数量，然后将其与整行一起打印到第二张表中。

这是我的CSS使用者介面。

Answer 1

您需要在函数中使用event.target而不是this。

$(document).ready(function() {
    $( "#table1 tbody tr" ).on( "click", function( event ) {
        var target = event.target;
        var product = target.attr('data-product');
        var price = target.attr('data-price');
        var barcode = target.attr('data-barcode');
        var unit = target.attr('data-unt');
        var qty = prompt("Enter number of items",1);
        var total = qty*price;

        $('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});

Answer 2

您的方法正确，只需使用$（this）修复JS选择器并格式化价格...

$("#table1 .js-add").on("click", function() {
    var target = $(this);
    var product = target.attr('data-product');
    var price = target.attr('data-price');
    var barcode = target.attr('data-barcode');
    var unit = target.attr('data-unt');
    var qty = prompt("Enter number of items", 1);
    var total = qty * price;
       
    $('#tableData').append("<tr><td>" + barcode + "</td><td>" + product + "</td><td>" + price + "</td><td>" + unit + "</td><td>" + qty + "</td><td>" + total.toFixed(2) + "</td><tr>");
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<table id="table1" class="table">
  <thead>
    <tr>
      <th>Barcode</th>
      <th>Product Name</th>
      <th>Price</th>
      <th>Unit</th>
      <th>Stocks</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="products">
    <tr>
      <td>123412</td>
      <td>Test</td>
      <td>12.99</td>
      <td>1</td>
      <td>10</td>
      <td>
        <input name='tab1' type="checkbox" class='js-add' data-barcode="123412" data-product="Test" data-price="12.99" data-unt="1"/>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="table2" class="table">
  <thead>
    <tr>
      <th>Barcode</th>
      <th>Description</th>
      <th>Price</th>
      <th>Unit</th>
      <th>Qty</th>
      <th>Sub.Total</th>
    </tr>
  </thead>
  <tbody id="tableData">
  </tbody>
</table>

Answer 3

在tr click事件上，您正在使用数据产品和其他选择器。未为tr定义data-product。您必须为每一行添加data-product属性。您可以参考-JQuery: Find (the index of) a row with a specific data attribute value

如何将我的代码从jquery中的输入复选框行更改为可点击行？

3 个答案: