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

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

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

我想从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>

热门问答

使用文档遇到问题,可以找谁处理?

请叫我雷锋!腾讯云文档有“文档反馈”的功能,直接在文档页面就可以反馈,反馈还有 礼品 ~ 云+社区:问答.png ... 展开详请

直播间IM消息可以下载到自己服务器备份吗?

人生的旅途辣鸡前端
推荐
目前仅私有群(Private)、公开群(Public)和聊天室(ChatRoom)具备消息漫游能力(默认7天)。核实下您那边的群组类型看是否支持https://cloud.tencent.com/document/product/269/1502#.E6.B6.88.E6.81....... 展开详请

webIM添加组员报错?

无聊至极互联网重度用户
推荐已采纳

付费超过组数限制,核实下是否超过限制

https://cloud.tencent.com/document/product/269/11673#.E5.8A.9F.E8.83.BD.E5.AF.B9.E6.AF.94

腾讯云容器加速地址是错的?

推荐已采纳

我刚才测试了一下,这个加速器地址可以用额,你这边是怎么测试出是关闭状态的啊?

加速器地址是不能直接用浏览器访问的,阿里云提供的直接访问也是空

Tencent iot-sdk-embedded-c在Windows下编译出错:无法解析外部符号?

无聊至极互联网重度用户
推荐已采纳

连接终端提示Socket connection established *怎么解决?

爸爸

腾讯 · 客户端安全 (已认证)

扫码关注云+社区

领取腾讯云代金券