复选框更改从html表和jquery里面工作不正确 [英] Checkbox change not working correctly inside from html table and jquery
本文介绍了复选框更改从html表和jquery里面工作不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对复选框有问题。以下是完整的代码。如果任何人都可以帮忙，请复制并粘贴以下代码，然后执行它。 jquery库附加在url上。
<！DOCTYPE HTML>
< html>
< head>
< title>测试< /标题>
< style type =text / css>
table {
font-family：Trebuchet MS，Arial，Helvetica，sans-serif;
border-collapse：collapse;
宽度：100％;
}
th，td {
border：1px solid #ddd;
padding：8px;
}
tr：nth-child（偶数）{background-color：＃f2f2f2;}
th {
padding-top：12px;
padding-bottom：12px;
text-align：center;
背景颜色：＃4CAF50;
颜色：白色;
}
按钮{
背景颜色：＃4CAF50; / *绿色* /
边框：无;
颜色：白色;
padding：16px 32px;
text-align：center;
text-decoration：none;
display：inline-block;
font-size：16px;
margin：4px 2px;
-webkit-transition-duration：0.4s; / * Safari * /
转换时长：0.4s;
光标：指针;
}
.btn {
background-color：white;
颜色：黑色;
border：2px solid＃4CAF50;
}
按钮：悬停{
背景颜色：＃4CAF50;
颜色：白色;
}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< / head>
< body>
< p><按钮类型=按钮class =btnid =loadButton>加载数据< /按钮>< / p>
< div style =overflow-x：auto;>
< table id =myTable>
< thead>
客户端代码< / th>
< th>名称< / th>
Bal< / th>
< th>由于< />
< th>收到的< th> G s< th>
th Adj Y / N< th>
< th>< input type =checkboxid =selectall/>所有< /第>
GS Adj Amt< / th>
Bal< / th>
< th>由于< />
< th>接收的SS< th>
th Adj Y / N< th>
< th>< input type =checkboxid =selectAll2/>所有< /第>
SS Adj Amt< / th>
Bal< / th>
< th>存款< / th>
< th>撤销< / th>
Rcvd< / th>
< th>第一< / th>
< / thead>
< tbody>
< / tbody>
< / table>
< / div>
< / body>
< / html>
< script type =text / javascript>
var myData = [060260000312，Abner，1000，100，100，，Select，0，3000，300，300 ，，选择，0，2000，0，0，，，
，060260000313，Aaron，1000 ，100，，选择，0，3000，300，300，，选择，0，2000，0 ，，];
var count = 0;
var tbody = $（'＃myTable> tbody'）;
var aa = myData.length /（myData.length / 2）;
var myAcNo = [S060260210101V1，S060260210101V2];
$（'＃loadButton'）。click（function（）{
for（var i = 0; i< aa; i ++）{
var tr = $（'< tr />'）.appendTo（tbody）;
for（var j = 0; j <19; j ++）{
if（j == 17 || j == 18）
tr.append（'< td align =center>< input type =checkbox/>< / td>'）;
else if（j == 5）
tr.append（'< td align =center>< input type =checkboxclass =grpChk/>'）;
else if（j == 11）
tr.append（'< td align =center>< input type =checkboxclass =samChk/>'）;
else if（j == 4 | | j == 10）
tr.append（'< td>< input type =textsize =4value ='+ myData [count] +'/>< td>'）;
else if（j == 7 || j == 13）
tr.append（'< td>< input type =textsize =4value ='+ myData [count] +'readonly =只读/>< / td& '）;
else if（j == 6 || j == 12）
tr.append（'< td>< select disabled>< option value =''+ myData [count] +'>'+ myData [count] +'< /选项>< /选择>< / TD>'）;
else
tr.append（'< td>'+ myData [count] +'< / td>'）;
if（j == 18）
count + = 2;
else count ++;
}
}
}）
var receivedValue = 0;
var table = $（'＃myTable'）;
var myCode;
var option = document.createElement（option）;
$ b $（document）.on（'change'，'.grpChk'，function（）{
var colIndex = $（this）.parent（）。index（）; //获取单击复选框的ColumnIndex
var rowIndex = $（this）.closest（'tr'）。index（）; //获取RowIndex
receivedValue = $（table）.find（ 'td：nth-child（'+ colIndex +'）input'）.val（）; //从同一行的Received Column获取值
myCode = myAcNo [rowIndex]; //获取acCode所选客户端的数组
option.value = option.text = myCode; //将选项元素设置为acCode
if（$（this）.is（' ：checked'））{
$（table）.find（'td：nth-child（'+（colIndex + 3）+'）input'）.val（receivedValue）; //设置adjAmt TextBox为（'+（colIndex + 2）+'）select'）。removeAttr（disable（）'） d'）; //删除下拉列表的禁用属性
$（table）.find（'td：nth-child（'+（colIndex + 2）+'）select'）。append（option）; //将选项变量追加到下拉列表
$（table）.find（'td：nth-child（'+（colIndex + 2）+'）select> option：eq（1）'）。attr（ 已选择，TRUE）; //选择新创建的下拉列表选项
} else {
$（table）.find（'td：nth-child（'+（colIndex + 3）+'）input'）。val 0）; //重置adjAmt TextBox为0
$（table）.find（'td：nth-child（'+（colIndex + 2）+'）select'）。find（option：not（：first） ）。去掉（）; //从下拉列表中删除附加项目
// $（table）.find（'td：nth-child（'+（colIndex + 2）+'）select'）。find（option [value =' + myCode +'）;
$（table）.find（'td：nth-child（'+（colIndex + 2）+'）select'）。prop（disabled，disabled）; //将禁用的属性应用于下拉列表
}
//警告所有
// alert（Col =+ colIndex +Row =+ rowIndex +Received =+ receivedValue +Ac Code =+ myCode +Option =+ option.text）;
$ b $（document）.on（'change'，'.samChk'，function（）{
var colIndex = $（this）.parent（）。 index（）;
var rowIndex = $（this）.closest（'tr'）。index（）;
receivedValue = $（table）.find（'td：n-child （'+ colIndex +'）input'）。val（）;
myCode = myAcNo [rowIndex];
option.value = option.text = myCode;
if（$（this）.is（'：checked'））{
$（table）.find（'td：nth-child（'+（colIndex + 3）+'）input'）。 val（receivedValue）;
} else {
$（table）.find（'td：nth-child（'+（colIndex + 3）+'）input'）。val（0） ;
}
// alert（Col =+ colIndex +Row =+ rowIndex +Received =+ receivedValue +Ac Code =+ myCode +Option = + option.text）;
}）
< / script>
当我选中[Adj Y / N]列中的复选框时，我需要为下一列中的下拉列表和下一列中的一些值，而不是下拉列表列。
但是问题在于将值填充到特定列的所有行。
解决方案
问题是，您没有确定正确的行至更新的值，而您当你说 $（table）.find 时，获得每个列。所以，首先你需要引用行。接下来，每当复选框更改时，您需要创建选项，否则同样的选项副本会更新每个检查。以下是您更新的活动，为了您的方便，我还将所有更改添加为可运行的代码段。
更新的代码
$（document）.on（'change'，'.grpChk'，function（）{
var $ row = $（this）.closest（'tr'）; // get引用当前行
var colIndex = $（this）.parent（）。index（）; //获取单击复选框的ColumnIndex
var rowIndex = $ row.index（）; //获取RowIndex
option = document.createElement（option）; //每次创建一个选项
receivedValue = $ row.find（'td：nth-child（'+ colIndex +'）input'）。 val（）; //从同一行的Received Column获取值
myCode = myAcNo [rowIndex]; //从所选客户端的数组中获取acCode
option.value = option.text = myCode; //设置选项元素为acCode
if（$（this）.is（'：checked'））{
//获取列值该当前行被选中。
$ row.find（'td：nth-child（'+（colIndex + 3）+'）input'）。val（receivedValue）; //设置adjAmt TextBox为receivedValue
$ row.find（'td：nth-child（'+（colIndex + 2）+'）select'）。removeAttr（disabled）; //删除下拉列表的禁用属性
$ row.find（'td：nth-child（'+（colIndex + 2）+'）select'）。append（option）; //添加选项变量到下拉列表
$ row.find（'td：nth-child（'+（colIndex + 2）+'）选择>选项：eq（1）'）。attr（selected ，真正）; //选择新创建的下拉列表选项
} else {
$ row.find（'td：nth-child（'+（colIndex + 3）+'）input'）。val（0 ）; //将adjAmt TextBox重置为0
$ row.find（'td：nth-child（'+（colIndex + 2）+'）select'）。find（option：not（：first）） 。去掉（）; //从下拉列表中删除附加项目
// $（table）.find（'td：nth-child（'+（colIndex + 2）+'）select'）。find（option [value =' + myCode +'）;
$ row.find（'td：nth-child（'+（colIndex + 2）+'）select'）。prop（disabled，disabled）; //将禁用的属性应用于下拉列表
}
//警告所有
// alert（Col =+ colIndex +Row =+ rowIndex +Received =+ receivedValue +Ac Code =+ myCode +Option =+ option.text）;
$）
$（document）.on（'change'，'.samChk'，function（）{
var $ row = $（this）.closest（' tr'）;
var colIndex = $（this）.parent（）。index（）;
var rowIndex = $ row.index（）;
$ b receivedValue = $ row .find（'td：nth-child（'+ colIndex +'）input'）.val（）;
myCode = myAcNo [rowIndex];
option.value = option.text ='myCode;
if（$（this）.is（'：checked'））{
$ row.find（'td：nth-child（'+（colIndex + 3） +'）input'）.val（receivedValue）;
} else {
$ row.find（'td：nth-child（'+（colIndex + 3）+'）input'）.val （0）;
}
// alert（Col =+ colIndex +Row =+ rowIndex +Received =+ receivedValue +Ac Code =+ myCode +Option =+ option.text）;
}）
代码段
var myData = [060260000312，Abner，1000，100， 100选择03000300300选择0200000 ，，060260000313，Aaron，1000，100，100，，选择，0，3000，300，300 ，Select，0，2000，0，0，，]; var count = 0; var tbody = $（'＃myTable> tbody'）; var aa = myData.length /（myData.length / 2）; var myAcNo = [S060260210101V1，S060260210101V2]; $（'＃loadButton'）。click（function（）{for （var j = 0; j <19; j ++）{if（j = 0; i table {font-family： Trebuchet MS，Arial，Helvetica，sans-serif;边界崩溃：崩溃; width：100％;} th，td {border：1px solid #ddd; padding：8px;} tr：nth-child（偶数）{background-color：＃f2f2f2;} th {padding-top：12px; padding-bottom：12px; text-align：center;背景颜色：＃4CAF50;颜色：白色;}按钮{背景颜色：＃4CAF50; / *绿色* /边框：无;白颜色;填充：16px 32px; text-align：center;文字修饰：无;显示：inline-block; font-size：16px; margin：4px 2px; -webkit-transition-duration：0.4s; / * Safari * /过渡时间：0.4s; cursor：pointer;}。btn {background-color：white;颜色：黑色; border：2px solid＃4CAF50;} button：hover {background-color：＃4CAF50; color：white;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本>< p为H. < button type =buttonclass =btnid =loadButton>加载数据< / button>< / p>< div style =overflow-x：auto;> < table id =myTable> < THEAD> < th>客户端代码< / th> <的第i;姓名< /第> <的第i;巴尔< /第> <的第i;由于与LT; /第> < th>接收<> G< / th>第Y个调整的Y / N第<的第i; < input type =checkboxid =selectall/> All< / th> GS Adj Amt< / th> <的第i;巴尔< /第> <的第i;由于与LT; /第> < th>接收的SS>第Y个调整的Y / N第<的第i; < input type =checkboxid =selectAll2/> All< / th> SS Adj Amt< / th> <的第i;巴尔< /第> <的第i;存款< /第> <的第i;退出< /第> <的第i; RCVD< /第> <的第i; PRST< /第> < / THEAD> < TBODY> < / tbody的> < / table>< / div>
I am having a problem regarding checkbox. The following is the complete code. If anyone can help please copy and paste the following code and you can execute it. The jquery library is attached from a url.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th, td{
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){ background-color: #f2f2f2;}
th{
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.btn{
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
button:hover {
background-color: #4CAF50;
color: white;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p><button type="button" class="btn" id="loadButton">Load Data</button></p>
<div style="overflow-x:auto;">
<table id="myTable">
<thead>
<th>Client Code</th>
<th>Name</th>
<th>Bal</th>
<th>Due</th>
<th>Received <br/>G S</th>
<th>Adj Y/N</th>
<th><input type="checkbox" id="selectall" /> All</th>
<th>GS Adj Amt</th>
<th>Bal</th>
<th>Due</th>
<th>Received SS</th>
<th>Adj Y/N</th>
<th><input type="checkbox" id="selectAll2" /> All</th>
<th>SS Adj Amt</th>
<th>Bal</th>
<th>Deposit</th>
<th>Withdraw</th>
<th>Rcvd</th>
<th>Prst</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
var myData = ["060260000312", "Abner", "1000", "100", "100", "", "Select", "0", "3000", "300", "300", "", "Select", "0", "2000", "0", "0", "", "",
,"060260000313", "Aaron", "1000", "100", "100", "", "Select", "0", "3000", "300", "300", "", "Select", "0", "2000", "0", "0", "", ""];
var count = 0;
var tbody = $('#myTable > tbody');
var aa = myData.length/ (myData.length/2);
var myAcNo = ["S060260210101V1", "S060260210101V2"];
$('#loadButton').click(function(){
for(var i = 0; i < aa; i++){
var tr = $('<tr/>').appendTo(tbody);
for(var j = 0; j< 19; j++){
if(j == 17 || j == 18)
tr.append('<td align="center"><input type="checkbox" /></td>');
else if(j == 5)
tr.append('<td align="center"><input type="checkbox" class="grpChk" />');
else if(j == 11)
tr.append('<td align="center"><input type="checkbox" class="samChk" />');
else if(j == 4 || j == 10)
tr.append('<td><input type="text" size = "4" value = "' + myData[count] + '" /></td>');
else if(j == 7 || j == 13)
tr.append('<td><input type="text" size = "4" value = "' + myData[count] + '" readonly="readonly" /></td>');
else if(j == 6 || j == 12)
tr.append('<td><select disabled><option value="' + myData[count] + '">' + myData[count] + '</option></select></td>');
else
tr.append('<td>' + myData[count] + '</td>');
if(j == 18)
count += 2;
else count++;
}
}
})
var receivedValue = 0;
var table = $('#myTable');
var myCode;
var option = document.createElement("option");
$(document).on('change', '.grpChk', function(){
var colIndex = $(this).parent().index(); // get ColumnIndex of the clicked checkbox
var rowIndex = $(this).closest('tr').index(); // get RowIndex
receivedValue = $(table).find('td:nth-child(' + colIndex + ') input').val(); // get the value from Received Column of the same row
myCode = myAcNo[rowIndex]; // get the acCode from the array for the selected client
option.value = option.text = myCode; // set the option element to acCode
if($(this).is(':checked')){
$(table).find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue); // set the adjAmt TextBox to the receivedValue
$(table).find('td:nth-child(' + (colIndex + 2) + ') select').removeAttr("disabled"); // removes the disabled property of the dropdownlist
$(table).find('td:nth-child(' + (colIndex + 2) + ') select').append(option); // append the option variable to the dropdownlist
$(table).find('td:nth-child(' + (colIndex + 2) + ') select>option:eq(1)').attr("selected",true); // selects newly created option of the dropdownlist
} else {
$(table).find('td:nth-child(' + (colIndex + 3) + ') input').val("0"); // reset the adjAmt TextBox to 0
$(table).find('td:nth-child(' + (colIndex + 2) + ') select').find("option:not(:first)").remove(); // removes the appended item from dropdownlist
//$(table).find('td:nth-child(' + (colIndex + 2) + ') select').find("option[value='" + myCode + "'");
$(table).find('td:nth-child(' + (colIndex + 2) + ') select').prop("disabled", "disabled"); // applies the disabled property to the dropdownlist
}
// alert everything
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
$(document).on('change', '.samChk', function(){
var colIndex = $(this).parent().index();
var rowIndex = $(this).closest('tr').index();
receivedValue = $(table).find('td:nth-child(' + colIndex + ') input').val();
myCode = myAcNo[rowIndex];
option.value = option.text = myCode;
if($(this).is(':checked')){
$(table).find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue);
} else {
$(table).find('td:nth-child(' + (colIndex + 3) + ') input').val("0");
}
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
</script>
When I check the checkbox in [Adj Y/N] column I need to append a value to the dropdownlist in the next column and some value in the next column than the dropdownlist column.
But the problem is the value gets populated to all the rows for that particular column.
解决方案
The problem was, you were not identifying proper row to update the values and you were getting each column when you say $(table).find. So, first you need to have a reference to the row. Next, you need to create option everytime when checkbox changes, else the same copy of option gets updated on each check. Below is you updated event and for your convenience I have also added the whole changes as runnable snippet. Let me know if you face any issues.
Updated Code
$(document).on('change', '.grpChk', function(){
var $row=$(this).closest('tr'); //get reference to current row
var colIndex = $(this).parent().index(); // get ColumnIndex of the clicked checkbox
var rowIndex = $row.index(); // get RowIndex
option = document.createElement("option");//create an option each time
receivedValue = $row.find('td:nth-child(' + colIndex + ') input').val(); // get the value from Received Column of the same row
myCode = myAcNo[rowIndex]; // get the acCode from the array for the selected client
option.value = option.text = myCode; // set the option element to acCode
if($(this).is(':checked')){
//get the column values referring the current row selected.
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue); // set the adjAmt TextBox to the receivedValue
$row.find('td:nth-child(' + (colIndex + 2) + ') select').removeAttr("disabled"); // removes the disabled property of the dropdownlist
$row.find('td:nth-child(' + (colIndex + 2) + ') select').append(option); // append the option variable to the dropdownlist
$row.find('td:nth-child(' + (colIndex + 2) + ') select>option:eq(1)').attr("selected",true); // selects newly created option of the dropdownlist
} else {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val("0"); // reset the adjAmt TextBox to 0
$row.find('td:nth-child(' + (colIndex + 2) + ') select').find("option:not(:first)").remove(); // removes the appended item from dropdownlist
//$(table).find('td:nth-child(' + (colIndex + 2) + ') select').find("option[value='" + myCode + "'");
$row.find('td:nth-child(' + (colIndex + 2) + ') select').prop("disabled", "disabled"); // applies the disabled property to the dropdownlist
}
// alert everything
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
$(document).on('change', '.samChk', function(){
var $row=$(this).closest('tr');
var colIndex = $(this).parent().index();
var rowIndex = $row.index();
receivedValue = $row.find('td:nth-child(' + colIndex + ') input').val();
myCode = myAcNo[rowIndex];
option.value = option.text = myCode;
if($(this).is(':checked')){
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue);
} else {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val("0");
}
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
Snippet
var myData = ["060260000312", "Abner", "1000", "100", "100", "", "Select", "0", "3000", "300", "300", "", "Select", "0", "2000", "0", "0", "", "", , "060260000313", "Aaron", "1000", "100", "100", "", "Select", "0", "3000", "300", "300", "", "Select", "0", "2000", "0", "0", "", ""];
var count = 0;
var tbody = $('#myTable > tbody');
var aa = myData.length / (myData.length / 2);
var myAcNo = ["S060260210101V1", "S060260210101V2"];
$('#loadButton').click(function() {
for (var i = 0; i < aa; i++) {
var tr = $('<tr/>').appendTo(tbody);
for (var j = 0; j < 19; j++) {
if (j == 17 || j == 18)
tr.append('<td align="center"><input type="checkbox" /></td>');
else if (j == 5)
tr.append('<td align="center"><input type="checkbox" class="grpChk" />');
else if (j == 11)
tr.append('<td align="center"><input type="checkbox" class="samChk" />');
else if (j == 4 || j == 10)
tr.append('<td><input type="text" size = "4" value = "' + myData[count] + '" /></td>');
else if (j == 7 || j == 13)
tr.append('<td><input type="text" size = "4" value = "' + myData[count] + '" readonly="readonly" /></td>');
else if (j == 6 || j == 12)
tr.append('<td><select disabled><option value="' + myData[count] + '">' + myData[count] + '</option></select></td>');
else
tr.append('<td>' + myData[count] + '</td>');
if (j == 18)
count += 2;
else count++;
}
}
})
var receivedValue = 0;
var table = $('#myTable');
var myCode;
var option = document.createElement("option");
$(document).on('change', '.grpChk', function() {
var $row = $(this).closest('tr'); //get reference to current row
var colIndex = $(this).parent().index(); // get ColumnIndex of the clicked checkbox
var rowIndex = $row.index(); // get RowIndex
option = document.createElement("option");
receivedValue = $row.find('td:nth-child(' + colIndex + ') input').val(); // get the value from Received Column of the same row
myCode = myAcNo[rowIndex]; // get the acCode from the array for the selected client
option.value = option.text = myCode; // set the option element to acCode
if ($(this).is(':checked')) {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue); // set the adjAmt TextBox to the receivedValue
$row.find('td:nth-child(' + (colIndex + 2) + ') select').removeAttr("disabled"); // removes the disabled property of the dropdownlist
$row.find('td:nth-child(' + (colIndex + 2) + ') select').append(option); // append the option variable to the dropdownlist
$row.find('td:nth-child(' + (colIndex + 2) + ') select>option:eq(1)').attr("selected", true); // selects newly created option of the dropdownlist
} else {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val("0"); // reset the adjAmt TextBox to 0
$row.find('td:nth-child(' + (colIndex + 2) + ') select').find("option:not(:first)").remove(); // removes the appended item from dropdownlist
//$(table).find('td:nth-child(' + (colIndex + 2) + ') select').find("option[value='" + myCode + "'");
$row.find('td:nth-child(' + (colIndex + 2) + ') select').prop("disabled", "disabled"); // applies the disabled property to the dropdownlist
}
// alert everything
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
$(document).on('change', '.samChk', function() {
var $row = $(this).closest('tr');
var colIndex = $(this).parent().index();
var rowIndex = $row.index();
receivedValue = $row.find('td:nth-child(' + colIndex + ') input').val();
myCode = myAcNo[rowIndex];
option.value = option.text = myCode;
if ($(this).is(':checked')) {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val(receivedValue);
} else {
$row.find('td:nth-child(' + (colIndex + 3) + ') input').val("0");
}
//alert("Col = " + colIndex + " Row = " + rowIndex + " Received = " + receivedValue + " Ac Code = " + myCode + " Option = " + option.text);
})
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.btn {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
button:hover {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button type="button" class="btn" id="loadButton">Load Data</button>
</p>
<div style="overflow-x:auto;">
<table id="myTable">
<thead>
<th>Client Code</th>
<th>Name</th>
<th>Bal</th>
<th>Due</th>
<th>Received
<br/>G S</th>
<th>Adj Y/N</th>
<th>
<input type="checkbox" id="selectall" />All</th>
<th>GS Adj Amt</th>
<th>Bal</th>
<th>Due</th>
<th>Received SS</th>
<th>Adj Y/N</th>
<th>
<input type="checkbox" id="selectAll2" />All</th>
<th>SS Adj Amt</th>
<th>Bal</th>
<th>Deposit</th>
<th>Withdraw</th>
<th>Rcvd</th>
<th>Prst</th>
</thead>
<tbody>
</tbody>
</table>
</div>
这篇关于复选框更改从html表和jquery里面工作不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
