CODEWITHSUNDEEP
javascriptjqueryhtml
Anaya Upadhyay
Anaya Upadhyay

Reputation: 45

Checkbox change not working correctly inside from html table and jquery

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.

Upvotes: 0

Views: 2167

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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>

Upvotes: 3

Related Questions