Javascript使用选项将单列html更改为多列

Question

我想从选择选项中获取x值，以使用javascript更改CSS样式中的x，到目前为止，我使用url变量对其进行了更改。 这里是示例：

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

完整示例，请检查JSFiddle

我想使用Javascript更改x值， 有人可以帮助我吗？

Answer 1

一个选择是，每次更改<select>时，都需要使用所需的CSS分配给动态<style>标签：

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>