0
チェックボックスに関する問題が発生しています。以下は完全なコードです。誰かが助けることができる場合は、次のコードをコピー＆ペーストして実行することができます。 jqueryライブラリはURLから添付されています。チェックボックスの変更がhtmlテーブルとjqueryから正しく機能しない
<!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]列のチェックボックスをチェックします。
しかし、問題は、その特定の列のすべての行に値が設定されることです。
どうもありがとうございました。あなたは私を救いました。 :) –
いつでも..ハッピーコーディング.. :) –
きれいにしました、そのの –