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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (70)

我想从select选项中获取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值,任何人都可以帮助我吗?

提问于
用户回答回答于

每次<select>更改时,一个选项是<style>使用您需要的CSS 分配给动态标签:

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>

扫码关注云+社区

领取腾讯云代金券