如何使用javascript用复选框替换html表中的真/假值

Question

我有一个 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>

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

无论如何这都会创建一个复选框，如果 Discontinued 为真，则勾选它。您可以检查下面的 sn-p 以查看它的运行情况。

// 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>

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