javascript - 复选框更改在 html 表和 jquery 内部无法正常工作

标签 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] 列中的复选框时，我需要将一个值附加到下一列的下拉列表中，并在下一列中附加一些值而不是下拉列表列。

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

最佳答案

问题是，您没有确定正确的行来更新值，并且当您说时，您得到了每个列 $(表).find。因此，首先您需要引用行。接下来，您需要在每次 checkbox 更改时创建 option，否则每次 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);
})

片段

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>

关于javascript - 复选框更改在 html 表和 jquery 内部无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41758345/

上一篇：javascript - 使用 Cordova 网页 View

下一篇：For 循环中的 JavaScript setTimeout 问题

相关文章：

javascript - 在 Javascript 中初始化变量的良好做法？

javascript - 返回 jQuery Mobile 时如何获得通知？

javascript - 如何在JavaScript中创建继承现有对象的新对象？

html - css 导航菜单未按预期显示

javascript - 一段代码阻止另一段代码工作

javascript - 如何使用xpath自动点击链接

jquery - 使用 flexbox 的 css Accordion

php - jquery复杂多日期选择插件

html - 动态改变另一个div中div的高度

javascript - 有没有办法查询wix中的成员集合并从任何成员获取数据？

©2024 IT工具网  联系我们