Question

我的表单中有一个HTML表和一些输入字段我在做什么

当我单击HTML表格的任意行时，我正在将它们的值取回输入字段
输入字段的值很容易重新填充，但是select下拉列表和复选框没有重新填充
在单击表行时，我想checked复选框为y
与select一样，要检索分配给该行的文本

代码段

var data = [{
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "admin",
    "User LoginId": "admin",
    "User Password": "admin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "maiyas",
    "User LoginId": "maiyas",
    "User Password": "maiyas",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbadmin",
    "User LoginId": "cbadmin",
    "User Password": "cbadmin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbaker",
    "User LoginId": "cbaker",
    "User Password": "cbaker",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "jayanagar",
    "User LoginId": "jayanagar",
    "User Password": "jayanagar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
    "User Name": "malleswaram",
    "User LoginId": "malleswaram",
    "User Password": "malleswaram",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "kolar",
    "User LoginId": "kolar",
    "User Password": "kolar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  }
]
var columndef = [{
    title: "Distributor Name",
    data: "Distributor Name"
  }, {
    title: "User Name",
    data: "User Name"
  }, {
    title: "User LoginId",
    data: "User LoginId"
  },
  {
    title: "User Password",
    data: "User Password"
  },
  {
    title: "User role",
    data: "User role"
  },
  {
    title: "Active",
    data: "Active"
  }
]
$('#tble').DataTable({
  columns: columndef,
  "columnDefs": [{
    "className": "dt-left",
    "targets": "_all"
  }],
  data: data,
  scrollY: "30vh",
  responsive: true,
  "bInfo": false,
  paging: false,
  scrollX: "100%",
  scrollCollapse: true
});

(function() {
  if (window.addEventListener) {
    window.addEventListener('load', run, false);
  } else if (window.attachEvent) {
    window.attachEvent('onload', run);
  }

  function run() {
    var t = document.getElementById('tble');
    t.onclick = function(event) {
      event = event || window.event; //IE8
      var target = event.target || event.srcElement;
      while (target && target.nodeName != 'TR') { // find TR
        target = target.parentElement;
      }
      //if (!target) { return; } //tr should be always found
      var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement
      //var cells = target.getElementsByTagName('td'); //alternative
      if (!cells.length || target.parentNode.nodeName == 'THEAD') {
        return;
      }
      var f1 = document.getElementById('distributorName');
      var f2 = document.getElementById('userCode');
      var f3 = document.getElementById('userName');
      var f4 = document.getElementById('loginId');
      var f5 = document.getElementById('password');
      var f6 = document.getElementById('active');
      f1.value = cells[0].innerHTML;
      f2.value = cells[1].innerHTML;
      f3.value = cells[2].innerHTML;
      f4.value = cells[3].innerHTML;
      f5.value = cells[4].innerHTML;
      f6.value = cells[5].innerHTML;
      //console.log(target.nodeName, event);
    };
  }

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.js"></script>
<div class="container form-group" id="container-userAdmin">
  <form id="changePasswordForm">

    <div class="row">
      <div class="col-lg-3">
        <label for="distributorName" id="commonHeader">Distributor
						Name:</label>
        <select id="distributorName" class="form-control test">

        </select>
      </div>

      <div class="col-lg-3">
        <label for="userCode" id="commonHeader">User Code:</label> <input type="text" id="userCode" name="usercode" class="form-control commonClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <label for="userName" id="commonHeader">Name of the User:</label> <input type="text" id="userName" name="userName" class="form-control commonClass" placeholder="User Name">
      </div>
      <div class="col-lg-3">
        <label for="loginId" id="commonHeader">login Id:</label> <input type="text" id="loginId" name="loginid" class="form-control commonClass" placeholder="Login Id">
      </div>
      <div class="col-lg-3">
        <label for="confirm_password" id="commonHeader"> Password:</label> <input type="text" id="password" placeholder="Password" class="form-control commonClass" required="required">
      </div>

      <div class="col-lg-3">
        <label for="checkbox" id="commonHeader">Active </label> <input type="checkbox" id="active" class="d-block">

      </div>

    </div>
    <hr>



    <table id="tble" class="table-striped table-bordered table-hover " style="width: 100%!important;"></table>
    <br>
    <div>
      <button type="submit" id="save" class="commonButton">
					<i class="fa fa-save"></i>save
				</button>
    </div>
  </form>
</div>

Answer 1

复选框不包含属性值，您可以使用以下代码：

var f6 = document.getElementById('active');
if(cells[5].innerHTML=='Y')
{
    f6.checked=true;
}
else
{
    f6.checked=false;
}

我假设您在数据表中存储的是“ Y”用于检查，而“ N”是用于取消选中复选框。

无法自动填充复选框并选择字段

1 个答案: