gpt4 book ai didi

javascript - 如何使用javascript中选中的复选框将表行附加到一个表到另一个表

转载 作者:行者123 更新时间:2023-12-01 00:17:19 25 4
gpt4 key购买 nike

我有两个表,第一个表有复选框,如果我单击该复选框,该行仅附加到第二个表(包括值),如果我取消选中该复选框,该行将删除第二个表。

这里,我的问题是第一行是静态行,它仅适用于静态行,我不想使用静态行,我只想仅适用于动态行。

示例:如果我单击了仅选中行(最接近的行)的复选框,则想要附加第二个表。

我编写了一些代码将行附加到另一个表。

这是我的代码。

<强> Full code is here..

这里是示例..

// Create New table

var counter = -1;
window.updateIds = function() {
$.each($("[row-number]"), function(index, item) {
$(this).attr("row-number", (index - 1));
$("[id^=itemNo]", $(this)).attr("id", "itemNo" + (index - 1));
});
}
window.createTable = function() {

counter++;

var itemNo = document.getElementById("serialNo").value;
var itemName = $("#it_name1 option:selected").text();
// var itemCode = document.getElementById("it_code1").value;
var itemCode = $("#it_code1 option:selected").text();
var description = document.getElementById("it_desc1").value;
var itemUom = document.getElementById("uomTable1").value;
var qty = document.getElementById("qty1").value;
// var reqNo = document.getElementById("reqNo1").value;
var reqNo = $("#reqNo1 option:selected").text();

$('#totalRowCount').text(counter - 0);
var htmlText = '';
htmlText += '<tr class="first" row-number="' + counter + '">';

htmlText += '<td class="itemNumber" style="min-width: 80px;">';
htmlText += '<input type="checkbox" class="led-btn checkNew" name="selpoNO[' + counter + '].valu" id="selpoNO' + counter + '" style="width: 13px;">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 80px;">';
htmlText += '<input type="text" id="itemNo' + counter + '" class="form-control" name="serialNo[' + counter + '].valu" value="' + itemNo + '" readonly>';
htmlText += '</td>';

htmlText += '<td>';
htmlText += '<select class="form-control" id="itemName' + counter + '">';
htmlText += '<option>' + itemName + '</option>';
htmlText += '</select>';
htmlText += '</td>';

htmlText += '<td>';
htmlText += '<select class="form-control" id="itemCode' + counter + '">';
htmlText += '<option>' + itemCode + '</option>';
htmlText += '</select>';
htmlText += '</td>';

htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="itemDescript' + counter + '" placeholder="Description" class="form-control" placeholde="Description" name="" value="' + description + '">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px;">';
htmlText += '<input type="text" id="itemUom' + counter + '" class="form-control" placeholder="Enter Uom in kg" name="" value="' + itemUom + '">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px;">';
htmlText += '<input type="text" id="qty' + counter + '" class="form-control" name="" placeholder="Quantity" value="' + qty + '">';
htmlText += '</td>';

// htmlText += '<td class="itemNumber">';
// htmlText += '<input type="text" id="itemAval' + counter + '" class="form-control" name="" value="' + itemAval + '">';
// htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px !important;">';
htmlText += '<button type="button" class="dlRow del"><i onclick="deleteRows();">Delete</button></i>';
htmlText += '</td>';
htmlText += '</tr>';
htmlText += '</tbody>';
htmlText += '</table>';

$('#tableBody').append(htmlText);
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum);
updateIds();
removeStaticVal();
}

// Delete rows
window.deleteRows = fdeleteRows = function() {

$('.del').click(function() {
$(this).parent().parent().remove();
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum);
updateIds();
});
}



// table checkbox function

$(":checkbox").on("click", function() {
if ($(this).is(":checked")) {
alert("if");
// $(this).closest("td").siblings("td").each(function() {
$(this).closest('tr').find("td:eq(0) .checkNew").each(function() {
// $("#tab_logic2 tbody").append($(this).text());
alert('executed');
var sno = $(this).closest('tr').find("td:eq(1) input").val();
var iName = $(this).closest('tr').find("td:eq(2) input").val();
var iCode = $(this).closest('tr').find("td:eq(3) input").val();
var iDect = $(this).closest('tr').find("td:eq(4) input").val();
var iUom = $(this).closest('tr').find("td:eq(5) input").val();
var iQty = $(this).closest('tr').find("td:eq(6) input").val();

$("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>');
});
} else {
alert('else section');
$("#tab_logic2 tbody").html("");
// $(":checkbox:checked").closest("td").siblings("td").each(function() {
$(this).closest('tr').find("td:eq(0) .checkNew").each(function() {
$("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>');
});
}
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Table -->

<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="table-wrapper">
<div class="table-scroll">
<table class="table table-bordered" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th style="min-width: 80px;">
#
</th>
<th style="min-width: 80px;">
S.no
</th>
<th class="text-center">
Item Name
</th>
<th class="text-center">
Item Code
</th>
<th style="min-width: 350px;">
Description
</th>
<th style="min-width: 140px;">
UOM
</th>
<th style="min-width: 140px;">
Quantity
</th>
<th style="min-width: 140px !important;">
Action
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr class="first" row-number="0" style="padding-bottom: 20%;">
<td style="min-width: 80px;">
<input type="checkbox" class="led-btn checkNew" name="selpoNO" id="selpoNO" value="PO" style="width: 13px;">
</td>
<td style="min-width: 80px;">
<input type="number" value="1" id="serialNo" class="form-control" name="serialNo" placeholder="S.No" readonly/>
</td>
<td class="common_td">
<select class="form-control newRw3 clrRow sel_text" id="it_name1" name="it_name">
<option value="">Choose an items</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
<option value="4">400</option>
<option value="5">500</option>
</select>
</td>
<td class="common_td">
<select class="form-control" id="it_code1" name="it_code1">
<option value="">Choose item code</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
<option value="4">400</option>
<option value="5">500</option>
</select>
</td>
<td style="min-width: 350px;">
<input type="text" id="it_desc1" class="form-control" name="it_desc" placeholder="Item Description" />
</td>
<td style="min-width: 140px;">
<input type="text" id="uomTable1" class="form-control newRw3 clrRow sel_text required" name="uomTable" placeholder="Enter Uom in kg" />
</td>
<td style="min-width: 140px;">
<input type="text" id="qty1" name="qty" class="form-control" placeholder="Quantity" />
</td>

<td style="min-width: 140px !important;">
<input type="button" class="dlRow" id="total1" value="Add" onclick="createTable();">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


<!-- Second table -->


<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="table-wrapper">
<div class="table-scroll">
<table class="table table-bordered" id="tab_logic2">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th style="min-width: 80px;">
S.no
</th>
<th style="min-width: 140px;">
Requistition No
</th>
<th style="min-width: 140px;">
Item Name
</th>
<th style="min-width: 140px;">
Item Code
</th>
<th style="min-width: 350px;">
Description
</th>
<th style="min-width: 140px;">
UOM
</th>
<th style="min-width: 140px;">
Quantity
</th>
<th style="min-width: 140px;">
Action
</th>
</tr>
</thead>
<tbody id="myNewtbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

最佳答案

您可以使用委托(delegate)方法将事件与 :gt() 一起附加(大于)选择器。

更改:

$(":checkbox").on("click", function() {

致:

//This will raise the event on all the checkboxes except the first one
$("table").on("click", ":checkbox:gt(0)", function() {

// Create New table

var counter = -1;
window.updateIds = function() {
$.each($("[row-number]"), function(index, item) {
$(this).attr("row-number", (index - 1));
$("[id^=itemNo]", $(this)).attr("id", "itemNo" + (index - 1));
});
}
window.createTable = function() {

counter++;

var itemNo = document.getElementById("serialNo").value;
var itemName = $("#it_name1 option:selected").text();
// var itemCode = document.getElementById("it_code1").value;
var itemCode = $("#it_code1 option:selected").text();
var description = document.getElementById("it_desc1").value;
var itemUom = document.getElementById("uomTable1").value;
var qty = document.getElementById("qty1").value;
// var reqNo = document.getElementById("reqNo1").value;
var reqNo = $("#reqNo1 option:selected").text();

$('#totalRowCount').text(counter - 0);
var htmlText = '';
htmlText += '<tr class="first" row-number="' + counter + '">';

htmlText += '<td class="itemNumber" style="min-width: 80px;">';
htmlText += '<input type="checkbox" class="led-btn checkNew" name="selpoNO[' + counter + '].valu" id="selpoNO' + counter + '" style="width: 13px;">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 80px;">';
htmlText += '<input type="text" id="itemNo' + counter + '" class="form-control" name="serialNo[' + counter + '].valu" value="' + itemNo + '" readonly>';
htmlText += '</td>';

htmlText += '<td>';
htmlText += '<select class="form-control" id="itemName' + counter + '">';
htmlText += '<option>' + itemName + '</option>';
htmlText += '</select>';
htmlText += '</td>';

htmlText += '<td>';
htmlText += '<select class="form-control" id="itemCode' + counter + '">';
htmlText += '<option>' + itemCode + '</option>';
htmlText += '</select>';
htmlText += '</td>';

htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="itemDescript' + counter + '" placeholder="Description" class="form-control" placeholde="Description" name="" value="' + description + '">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px;">';
htmlText += '<input type="text" id="itemUom' + counter + '" class="form-control" placeholder="Enter Uom in kg" name="" value="' + itemUom + '">';
htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px;">';
htmlText += '<input type="text" id="qty' + counter + '" class="form-control" name="" placeholder="Quantity" value="' + qty + '">';
htmlText += '</td>';

// htmlText += '<td class="itemNumber">';
// htmlText += '<input type="text" id="itemAval' + counter + '" class="form-control" name="" value="' + itemAval + '">';
// htmlText += '</td>';

htmlText += '<td class="itemNumber" style="min-width: 140px !important;">';
htmlText += '<button type="button" class="dlRow del"><i onclick="deleteRows();">Delete</button></i>';
htmlText += '</td>';
htmlText += '</tr>';
htmlText += '</tbody>';
htmlText += '</table>';

$('#tableBody').append(htmlText);
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum);
updateIds();
removeStaticVal();
}

// Delete rows
window.deleteRows = fdeleteRows = function() {

$('.del').click(function() {
$(this).parent().parent().remove();
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum);
updateIds();
});
}



// table checkbox function

$("table").on("click", ":checkbox:gt(0)", function() {
if ($(this).is(":checked")) {
var id = $(this).attr('id'); //get the id of the current checkbox
$(this).closest('tr').find("td:eq(0) .checkNew").each(function() {
// $("#tab_logic2 tbody").append($(this).text());
//alert('executed');
var sno = $(this).closest('tr').find("td:eq(1) input").val();
var iName = $(this).closest('tr').find("td:eq(2) input").val();
var iCode = $(this).closest('tr').find("td:eq(3) input").val();
var iDect = $(this).closest('tr').find("td:eq(4) input").val();
var iUom = $(this).closest('tr').find("td:eq(5) input").val();
var iQty = $(this).closest('tr').find("td:eq(6) input").val();

//set the custom attribute to the appending tr
$("#tab_logic2 tbody").append('<tr data='+ id +'><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>');
});
} else {
//alert('else section');
//remove by maching the custom attribute with the check box id
$("#tab_logic2 tbody [data="+$(this).attr('id')+"]").remove();
}
});

function removeStaticVal(){
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Table -->

<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="table-wrapper">
<div class="table-scroll">
<table class="table table-bordered" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th style="min-width: 80px;">
#
</th>
<th style="min-width: 80px;">
S.no
</th>
<th class="text-center">
Item Name
</th>
<th class="text-center">
Item Code
</th>
<th style="min-width: 350px;">
Description
</th>
<th style="min-width: 140px;">
UOM
</th>
<th style="min-width: 140px;">
Quantity
</th>
<th style="min-width: 140px !important;">
Action
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr class="first" row-number="0" style="padding-bottom: 20%;">
<td style="min-width: 80px;">
<input type="checkbox" class="led-btn checkNew" name="selpoNO" id="selpoNO" value="PO" style="width: 13px;">
</td>
<td style="min-width: 80px;">
<input type="number" value="1" id="serialNo" class="form-control" name="serialNo" placeholder="S.No" readonly/>
</td>
<td class="common_td">
<select class="form-control newRw3 clrRow sel_text" id="it_name1" name="it_name">
<option value="">Choose an items</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
<option value="4">400</option>
<option value="5">500</option>
</select>
</td>
<td class="common_td">
<select class="form-control" id="it_code1" name="it_code1">
<option value="">Choose item code</option>
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
<option value="4">400</option>
<option value="5">500</option>
</select>
</td>
<td style="min-width: 350px;">
<input type="text" id="it_desc1" class="form-control" name="it_desc" placeholder="Item Description" />
</td>
<td style="min-width: 140px;">
<input type="text" id="uomTable1" class="form-control newRw3 clrRow sel_text required" name="uomTable" placeholder="Enter Uom in kg" />
</td>
<td style="min-width: 140px;">
<input type="text" id="qty1" name="qty" class="form-control" placeholder="Quantity" />
</td>

<td style="min-width: 140px !important;">
<input type="button" class="dlRow" id="total1" value="Add" onclick="createTable();">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


<!-- Second table -->


<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="table-wrapper">
<div class="table-scroll">
<table class="table table-bordered" id="tab_logic2">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th style="min-width: 80px;">
S.no
</th>
<th style="min-width: 140px;">
Requistition No
</th>
<th style="min-width: 140px;">
Item Name
</th>
<th style="min-width: 140px;">
Item Code
</th>
<th style="min-width: 350px;">
Description
</th>
<th style="min-width: 140px;">
UOM
</th>
<th style="min-width: 140px;">
Quantity
</th>
<th style="min-width: 140px;">
Action
</th>
</tr>
</thead>
<tbody id="myNewtbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

关于javascript - 如何使用javascript中选中的复选框将表行附加到一个表到另一个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60332947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com