- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有两个表,第一个表有复选框,如果我单击该复选框,该行仅附加到第二个表(包括值),如果我取消选中该复选框,该行将删除第二个表。
这里,我的问题是第一行是静态行,它仅适用于静态行,我不想使用静态行,我只想仅适用于动态行。
示例:如果我单击了仅选中行(最接近的行)的复选框,则想要附加第二个表。
我编写了一些代码将行附加到另一个表。
这是我的代码。
这里是示例..
// 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/
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它, 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在,我想写入文件 2 中的行,否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id,SUB(row, row - 1),其中user_id=@userid我的表用户,id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法,但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心,该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式,使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白,但效果不佳。 最
下面的代码从数据库中获取我需要的信息,但没有打印出所有信息。首先,我知道它从表中获取了所有正确的信息,因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我试图在两个表中插入记录,但出现异常。您能帮我解决这个问题吗? 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行,我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码,
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时,不是像您通常期望的那样使用sheet.getCell(row,col),而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统,其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录,但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢? query($q)
我在互联网上寻找答案,但找不到任何答案。 (我可能问错了?)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询,我想从数据库中获取 100 个项目,但 host_id 多次出现在 urls 表中,我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等,直到文本文件结束。例如在第 4 行声明,打印 5-9,跳过 10-14,打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码,但问题是我无法理解为什么我的查询返回零行,而预期它有 1 行。另一件事是,即使我不将密码文本转换为 md5,哈希密码仍然得到正确的答案,但我不知道为什么会发生
我是一名优秀的程序员,十分优秀!