1

我有一个 javascript 对象数组，用于动态填充 html 表。我遍历每个对象，一切都很好。但是，其中一个键的值为真/假，我需要用数组中每个对象的复选框替换该值。我怎样才能做到这一点？

复选框需要勾选为假而不勾选为真，还需要禁用复选框，因为我们不希望用户交互。

// Draw table from 'products' array of objects 
function drawTable(tbody) {
  var tr, td;
  tbody = document.getElementById(tbody);
  for (var i = 0; i < products.length; i++) // loop through data source
  {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].ProductName;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitsInStock;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitPrice;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].Discontinued;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = document.createElement('button');
  }
}

drawTable('table-data')
<h2>Products</h2>

<div class="table-wrapper">
  <table id="display-table" class="fl-table">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Units In Stock</th>
        <th>Unit Price</th>
        <th>Discontinued</th>
      </tr>
    </thead>
    <tbody id="table-data">

    </tbody>
  </table>
</div>

4

3 回答 3

1

以下是如何根据数组中名为“复选框”的字段添加复选框列，该字段为真/假。我只是在这里匹配您的代码，因此很容易理解：

    td = tr.insertCell(tr.cells.length);
    checkbox = document.createElement('input');
    checkbox.setAttribute("type", "checkbox");
    checkbox.disabled = true;
    checkbox.checked = products[i].checkbox;
    td.appendChild(checkbox);
于 2019-08-19T00:07:21.043 回答
0

您可以使用innerHTML。如果值为真，则显示 <input type="checkbox" checked /> ，否则如果为假，则从标签中删除“已选中”。

如果复选框是可点击的，您可能还想附加一个 onclick 函数，以便值更新。

于 2019-08-18T23:41:07.997 回答
0

您需要做的是检查每个产品的 Discontinued 值，如下所示：

if(products[i].Discontinued = true) {
  td.innerHTML = "<input type='checkbox' checked />";
} else {
  td.innerHTML = "<input type='checkbox' />";
}

无论如何，这将创建一个复选框，如果 Discontinued 为真，则勾选它。您可以查看下面的代码片段以查看它的实际效果。

// Draw table from 'products' array of objects 
function drawTable(tbody) {
  var tr, td;
  var product = new Product("Product 1", 2, 10, true);
  var products = [new Product("Product 1", 2, 10, true), new Product("Product 2", 30, 50, false)];
  tbody = document.getElementById(tbody);
  for (var i = 0; i < products.length; i++) // loop through data source
  {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].ProductName;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitsInStock;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitPrice;
    td = tr.insertCell(tr.cells.length);
    if (products[i].Discontinued = true) {
      td.innerHTML = "<input type='checkbox' checked />";
    } else {
      td.innerHTML = "<input type='checkbox' />";
    }

    td = tr.insertCell(tr.cells.length);
    td.innerHTML = document.createElement('button');
  }
}

drawTable('table-data')

function Product(name, stock, price, discontinued) {
  this.ProductName = name;
  this.UnitsInStock = stock;
  this.UnitPrice = price;
  this.Discontinued = discontinued;
}
<h2>Products</h2>

<div class="table-wrapper">
  <table id="display-table" class="fl-table">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Units In Stock</th>
        <th>Unit Price</th>
        <th>Discontinued</th>
      </tr>
    </thead>
    <tbody id="table-data">

    </tbody>
  </table>
</div>

注意：我添加了一些代码来为此示例创建两个产品，不要将其包含在您的项目中。

于 2019-08-19T03:08:56.637 回答