blocks|key|4012871|text|一种选择是，每次更改<select>时，使用所需的CSS将其分配给动态<style>标记：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4012872|​|4012873|function+changeCols(cols)+{
++style.textContent+=+`
++++tr:nth-child(${cols}n%2B1)+{
+++++++clear:+left;
++++}
++`;
}
const+style+=+document.head.appendChild(document.createElement('style'));
changeCols(5);
const+select+=+document.querySelector('select');
select.onchange+=+()+=>+{
++changeCols(select.value);
};|code-block|syntax|javascript|4012874|table+{
++display:+block;
}

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

td+{
++display:+inline;
}|4012875|<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>|4012876|4012877|entityMap^0|A|8|Z|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>One option would be, every time the <code>&lt;select&gt;</code> is changed, to assign to a dynamic <code>&lt;style&gt;</code> tag with the CSS you need:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; {
  changeCols(select.value);
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  display: block;
}

tr {
  display: inline-block;
  float: left;
  border: solid 1px;
  width: 4em;
}

td {
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name='x'&gt;
&lt;option value = '1'&gt;1 col&lt;/option&gt;
&lt;option value = '2'&gt;2 col&lt;/option&gt;
&lt;option value = '3'&gt;3 col&lt;/option&gt;
&lt;option value = '4'&gt;4 col&lt;/option&gt;
&lt;option value = '5' selected&gt;5 col&lt;/option&gt;
&lt;/select&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;table&gt;
  &lt;thead&gt;Details&lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;def&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ghi&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;jkl&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;mno&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;pqr&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;stu&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;vwx&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zab&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;def&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ghi&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;jkl&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;mno&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;pqr&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;stu&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;vwx&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zab&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;def&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ghi&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;jkl&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;mno&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;pqr&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;stu&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;vwx&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zab&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;def&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ghi&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;jkl&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;mno&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;pqr&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;stu&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;vwx&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zab&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;abc&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;def&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;ghi&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;jkl&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;mno&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;pqr&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;stu&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;vwx&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;zab&lt;/td&gt;
    &lt;/tr&gt;

  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>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:</p>

<pre><code>&lt;select name='X'&gt; 
&lt;option value = '1'&gt;1 col&lt;/option&gt;
&lt;option value = '2'&gt;2 col&lt;/option&gt; 
&lt;option value = '3'&gt;3 col&lt;/option&gt; 
&lt;option value = '4'&gt;4 col&lt;/option&gt; 
&lt;option value = '5'&gt;5 col&lt;/option&gt; 
&lt;/select&gt;
</code></pre>

<p>css: </p>

<pre><code>tr:nth-child(Xn+1) {
   clear: left;
}
</code></pre>

<p>full example please check <a href="http://jsfiddle.net/wh66x2kv/50/" rel="nofollow noreferrer">JSFiddle</a></p>

<p>I want to use Javascript to change x values, 
anyone can help me?</p>


Javascript Change Single column html to multiple column with option

我想从select选项中获取x值，以便用javascript更改css样式中的x，到目前为止，我使用url变量来更改它。下面是示例：<select name='X'> <option value = '1'>1 col</option><option value = '2'>2 col</option> <option...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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