【发布时间】：2017-01-20 07:35:40
【问题描述】：
我对复选框有疑问。以下是完整的代码。如果有人可以帮忙，请复制并粘贴以下代码，您可以执行它。 jquery 库是从 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>
当我选中 [Adj Y/N] 列中的复选框时，我需要在下一列的下拉列表中添加一个值，并在下一列中添加一些值而不是下拉列表列。
但问题是该值被填充到该特定列的所有行中。
【问题讨论】：
标签： javascript jquery html