62359

Checkbox change not working correctly inside from html table and jquery

Question:

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>

<button type="button" class="btn" id="loadButton">Load Data</button>

<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.

Answer1:

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.

<strong>Updated Code</strong>

$(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); })

<strong>Snippet</strong>

<pre class="snippet-code-js lang-js prettyprint-override">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); }) <pre class="snippet-code-css lang-css prettyprint-override">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; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="btn" id="loadButton">Load Data</button>

<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>

Recommend

  • Add foreach value to Ajax
  • Docker container for google cloudML on compute engine - authenticating for mounting bucket
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • Youtube upload API and cordova / phonegap
  • Apply a gradle plugin with a common configuration to all projects
  • Slow performance in hybrid AngularJS and Angular application in Safari
  • Sencha Touch 2.1 native (android) app not getting json from remote (it works on PC)
  • SCons libraries and sub-libraries
  • Query timeout expired in django-mssql when executing custom SQL directly
  • Eventbus onMessageEvent not getting called
  • How do I obtain a list of files that changed from svn over a date range?
  • integrate POCO library in android ndk
  • Cursor in wrong place in contenteditable
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?
  • Cannot page through all results using nextPageToken on YouTube search API v3
  • Creating a Multi-Step Modal Using Jquery
  • Pre-populated SQLite Database not reading properly in Android Studio
  • AlertDialog style when using setView()
  • Google OAuth: can't get refresh token with authorization code
  • Converting query results into DataFrame in python
  • HTML5 video only works in IE. The other browsers shows the black screen
  • Possible to get mouse events fired when cursor is outside page?
  • Thread 1: EXC_BAD_ACCESS (code =1 address = 0x0)
  • AppleScript : find open tab in safari by name and open it
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • AndEngine Applying Transparancy to AndEngine View
  • Object and struct member access and address offset calculation
  • How to assign byte[] as a pointer in C#
  • Adjust width of select element according to selected option's width
  • Django rest serializer Breaks when data exists
  • Can I check if a recipient has an automatic reply before I send an email?
  • Change multiple background-images with jQuery
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • JFileChooser in front of fullscreen Swing application
  • Importing jscolor library in angular 2
  • A cron job substitute?
  • How can i traverse a binary tree from right to left in java?