Javascript Change Single column html to multiple column with option

Question

I want to get x values from select option to change x in css style with javascript, so far i use url variable to change it. here the example:

<select name='X'> 
<option value = '1'>1 col</option>
<option value = '2'>2 col</option> 
<option value = '3'>3 col</option> 
<option value = '4'>4 col</option> 
<option value = '5'>5 col</option> 
</select>

css:

tr:nth-child(Xn+1) {
   clear: left;
}

full example please check JSFiddle

I want to use Javascript to change x values, anyone can help me?

CertainPerformance · Accepted Answer · 2018-10-20 21:16:38Z

One option would be, every time the <select> is changed, to assign to a dynamic <style> tag with the CSS you need:

function changeCols(cols) {
  style.textContent = `
    tr:nth-child(${cols}n+1) {
       clear: left;
    }
  `;
}
const style = document.head.appendChild(document.createElement('style'));
changeCols(5);
const select = document.querySelector('select');
select.onchange = () => {
  changeCols(select.value);
};

table {
  display: block;
}

tr {
  display: inline-block;
  float: left;
  border: solid 1px;
  width: 4em;
}

td {
  display: inline;
}

<select name='x'>
<option value = '1'>1 col</option>
<option value = '2'>2 col</option>
<option value = '3'>3 col</option>
<option value = '4'>4 col</option>
<option value = '5' selected>5 col</option>
</select>
<br/><br/>
<table>
  <thead>Details</thead>
  <tbody>
    <tr>
      <td>abc</td>
    </tr>

    <tr>
      <td>def</td>
    </tr>
    <tr>
      <td>ghi</td>
    </tr>
    <tr>
      <td>jkl</td>
    </tr>
    <tr>
      <td>mno</td>
    </tr>
    <tr>
      <td>pqr</td>
    </tr>
    <tr>
      <td>stu</td>
    </tr>
    <tr>
      <td>vwx</td>
    </tr>
    <tr>
      <td>zab</td>
    </tr>
    <tr>
      <td>abc</td>
    </tr>

    <tr>
      <td>def</td>
    </tr>
    <tr>
      <td>ghi</td>
    </tr>
    <tr>
      <td>jkl</td>
    </tr>
    <tr>
      <td>mno</td>
    </tr>
    <tr>
      <td>pqr</td>
    </tr>
    <tr>
      <td>stu</td>
    </tr>
    <tr>
      <td>vwx</td>
    </tr>
    <tr>
      <td>zab</td>
    </tr>
    <tr>
      <td>abc</td>
    </tr>

    <tr>
      <td>def</td>
    </tr>
    <tr>
      <td>ghi</td>
    </tr>
    <tr>
      <td>jkl</td>
    </tr>
    <tr>
      <td>mno</td>
    </tr>
    <tr>
      <td>pqr</td>
    </tr>
    <tr>
      <td>stu</td>
    </tr>
    <tr>
      <td>vwx</td>
    </tr>
    <tr>
      <td>zab</td>
    </tr>
    <tr>
      <td>abc</td>
    </tr>

    <tr>
      <td>def</td>
    </tr>
    <tr>
      <td>ghi</td>
    </tr>
    <tr>
      <td>jkl</td>
    </tr>
    <tr>
      <td>mno</td>
    </tr>
    <tr>
      <td>pqr</td>
    </tr>
    <tr>
      <td>stu</td>
    </tr>
    <tr>
      <td>vwx</td>
    </tr>
    <tr>
      <td>zab</td>
    </tr>

    <tr>
      <td>abc</td>
    </tr>

    <tr>
      <td>def</td>
    </tr>
    <tr>
      <td>ghi</td>
    </tr>
    <tr>
      <td>jkl</td>
    </tr>
    <tr>
      <td>mno</td>
    </tr>
    <tr>
      <td>pqr</td>
    </tr>
    <tr>
      <td>stu</td>
    </tr>
    <tr>
      <td>vwx</td>
    </tr>
    <tr>
      <td>zab</td>
    </tr>

  </tbody>
</table>

Collectives™ on Stack Overflow

Javascript Change Single column html to multiple column with option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related