Home / user-62027

Ray's questions

Martin Hope
Ray
Asked: 2020-07-25 21:37:38 +0800 CST
  • 2

I have the following arrangement

const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];

I would like to display it as follows, i.e. limit it to 4 columns and N rows:

table {
  font-family: 'Verdana';
  padding: 25px;
}

td {
  border: 2px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
  padding: 25px;
}
<table>
  <tbody>
    <tr>
      <td>t1</td>
      <td>t2</td>
      <td>t3</td>
      <td>t4</td>
    </tr>
    <tr>
      <td>t5</td>
      <td>t6</td>
      <td>t7</td>
      <td>t8</td>
    </tr>
    <tr>
      <td>t8</td>
    </tr>
  </tbody>
</table>

I'm trying this but what happens is that it repeats the elements to me a lot of times and I can't solve it:

let cols = 4;
const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];
const tBody = document.getElementById('table-content');


arr.forEach((row) => {
  let i = 0;
  const itemsToRender = arr.slice(i, cols);
  
  if (i === 0) {
      i = cols;
  } else {
      cols *= 2;
      i = cols / 2;
  }
    
  const newRow = tBody.insertRow();
  
  itemsToRender.forEach((col, index) => {
    const newCell = newRow.insertCell(index);
    const cellValue =  document.createTextNode(row);
    newCell.appendChild(cellValue);
  });
  
});
table {
  font-family: 'Verdana';
  padding: 25px;
}

td {
  border: 2px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
  padding: 25px;
}
<table>
  <tbody id="table-content">
  </tbody>
</table>

javascript
Martin Hope
Ray
Asked: 2020-10-05 16:37:20 +0800 CST
  • 1

I have the following code, what I want is that the two buttons of each column in the second row occupy 100% of the space of the .col class as it happens in the first row with the btn-block class, how could I do it?

*{
  border-radius: 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
  
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 1 - Row 1</button>
    </div>
    
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 2 - Row 1</button>
    </div>
    
  </div>

  <br />

  <div class="row">
  
    <div class="col">
      <div class="btn-group btn-group-block" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 1 - Row 2</button>
      </div>
    </div>
    
    <div class="col">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 2 - Row 2</button>
      </div>
    </div>
  </div>
  
</div>

html