CODEWITHSUNDEEP
javascriptcssreactjs
moawwad
moawwad

Reputation: 51

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. 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:

enter image description here

Upvotes: 0

Views: 409

Answers (2)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

there is the attribute colspan to td tag that the number is the number of rows he stretched on.

<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

Upvotes: 1

Adam
Adam

Reputation: 79

put this in:

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

Upvotes: 1

Related Questions