将单列HTML转换为多列HTML，带有选项的JavaScript更改。

Question

我想通过JavaScript从选择选项中获取x值，然后将其用于更改CSS样式。目前，我使用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;
}

我想使用Javascript来改变x的值，有人能帮我吗？

请查看完整示例JSFiddle

- script888

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>

- CertainPerformance