简体   繁体   English

如何使 JavaScript 单元采用全行宽度

[英]how to make JavaScript cell take full row width

I have a table which takes data from an array.我有一个从数组中获取数据的表。 My problem is that I do not know how to make it so that the cell takes the whole row if the objects in the array have a value of zero.我的问题是,如果数组中的对象的值为零,我不知道如何使单元格占据整行。 If it has a value greater than zero, 2 cells will be displayed one with an item name and another with its value.如果它的值大于零,将显示 2 个单元格,一个带有项目名称,另一个带有其值。 Any help is much appreciated.任何帮助深表感谢。

      //breaks loop if x is == to counters array
      if (this.state.counters.length == x) {
        break;
      }
      const info = this.state.counters[x]["text"];
      const quantity = this.state.counters[x]["value"];
      console.log(info, quantity);

      //creates rows based on input
      var table = document.getElementById("myList");
      var row = table.insertRow(1);

      document.getElementById("thTitle").style.maxWidth = "100px";

      if (quantity <= 0) {
        var itemCell = row.insertCell(0);
        itemCell.innerHTML = info;
      } else {
        var itemCell = row.insertCell(0);
        var quantityCell = row.insertCell(1);
        itemCell.innerHTML = info;
        itemCell.style.minWidth = "100px";
        quantityCell.innerHTML = quantity;
      } 

This is my output:这是我的 output:

在此处输入图像描述

there is the attribute colspan to td tag that the number is the number of rows he stretched on.有属性 colspan 到 td 标签,数字是他拉伸的行数。

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

//In Js just add 
itemCell.setAttribute('colspan', '2');
when the quantity <= 0

put this in:把这个放在:

if (quantity <= 0) {
  var itemCell = row.insertCell(0);
  itemCell.innerHTML = info;
  // this line
  itemCell.setAttribute('colspan', '2');
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM