复选框从html表和jquery中无法正常工作

时间：2017-01-20 07:35:41

标签： javascript jquery html

我遇到关于复选框的问题。以下是完整的代码。如果有人可以帮助请复制并粘贴以下代码，您就可以执行它。 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]列中的复选框时，我需要在下一列的下拉列表中添加一个值，并在下一列中添加一些值而不是下拉列表列。

但问题是该值会填充到该特定列的所有行。

1 个答案:

答案 0 :(得分：3)

问题是，您没有确定row到update个值，而当您说column时，每个$(table).find都会得到row。所以，首先你需要引用option。接下来，您需要在checkbox更改时每次创建check，否则每个$(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); }) 都会更新相同的选项副本。以下是您更新的活动，为方便起见，我还将整个更改添加为runnable片段。如果您遇到任何问题，请告诉我。

更新代码 

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

<强>段

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13; 
--transform
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题