javascript - 如何将我的代码从 jquery 中的输入复选框行更改为可点击的行?
问题描述
我有一个表,该表中的数据来自数据库。我想单击此行并将其传输到其他表。我可以使用输入复选框转移这一行。我意识到只需单击不带复选框的行即可轻松方便地传输行。我很难将其转换为可点击而不是复选框。
我尝试使用此代码
$(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>
我希望只需单击该行,它就会自动传输到 table2,并使用一个对话框提示询问产品的数量,然后它将与整行一起打印到第二个表中。
解决方案
您需要在函数中使用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>");});
推荐阅读
- git - Cherrypick 从一个存储库更改为具有不同文件结构的另一个存储库
- sql - PostgreSQL合并递归查询和JOIN
- windows - 为什么我的 powershell 使用代理 127.0.0.1:1080
- java - 为什么这个堆栈跟踪在日志中没有这一行?
- mysql - 尝试计算总订单和每月唯一客户
- python - 无法使用 Python 打开 Instagram 关注者页面
- android - Dagger 2 组件中存在具有匹配键的绑定
- spring-boot - 拆分共享一些类似功能的管理 API 和公共 API 是否是一种好方法?
- javascript - 拆分函数正在重复值
- c++ - QColorDialog 在 Ubuntu 上有所不同