Question

我对表有一些问题，关于隐藏和显示特定的列和值，这就是代码：

function myFunction() {
    // Declare variables 
    var rigaZona, colonnaZona;
    colonnaZona = document.getElementById("colonnaZona");
    rigaZona = document.getElementById("rigaZona");
    rigaZona.style.display='blocked';
    colonnaZona.style.display='blocked';
}

<select onchange="myFunction()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<table id="myTable">
  <tr class="header">
    <th style="display:none;">head1</th>
    <th>head2</th>
    <th style="width: 65%;">head3</th>
    <th>head4</th>
    <th>head5</th>
    <th id="colonnaZona" style="display:none;">head6</th>
  </tr>

  <tr>

    <td style="display:none">miao</td>
    <td>bau</td>
    <td>roar</td>
    <td>cip</td>
    <td>asd</td>
    <td id="rigaZona" style="display:none">africa</td>
  </tr>

</table>

出现了一些东西，但不是我期待的东西，我想在选择，任何解决方案的变化中将rigaZona和colonnaZona设置为可见？

Answer 1

您只是获取DOM元素，更改您必须使用的样式属性.style属性，如下所示：

function myFunction() {
  document.getElementById("colonnaZona").style.display="block";
  document.getElementById("rigaZona").style.display="block";
}

Answer 2

Display是属性，而不是函数。要更改显示样式，请使用：

 rigaZona.style.display = 'none';

此外，显示屏还有 block ， none ， inline-block 等选项，但没有{{1}这样的选项}}

Answer 3

function myFunction() {
    var colonnaZona = document.getElementById("colonnaZona");
    var rigaZona = document.getElementById("rigaZona");

    colonnaZona.classList.add('visible-cell');
    rigaZona.classList.add('visible-cell');
}

如果您想切换元素的可见性，请改用element.classList.toggle('visible-cell')。

然后在样式表中的某个地方

.visible-cell {
    display: table-cell !important;
}

Answer 4

如果要将选择列表集成到对应于显示和隐藏表中的特定列的位置。最好将id /类in each and td`与select class中的值相同。试试这个：

选择将改变表格外观：

//getting select list value
var arr = Array.from(document.querySelectorAll("#sels option"));
    arr.forEach(function(v,i){
      arr[i] = v.value;
    })

function arrShow(list, cl) {
  list.forEach(function(el) {
    var t = document.getElementsByClassName(el);    
    if (el === cl) {
      //just hard coded it since i know only two elements th and td
      t[0].style.display = 'block';
      t[1].style.display = 'block';
    } else {
      t[0].style.display = 'none';
      t[1].style.display = 'none';
    } 
  })
}

arrShow(arr, "c2");

function myFunction(s) {
  arrShow(arr,s);
}

table td {
  text-align: center;
}

table th {
  border: 1px solid green;
}

<select id="sels" onchange="myFunction(this.value)">
  <option value="c1">c1</option>
  <option value="c2" selected>c2</option>
  <option value="c6">c6</option>
</select>
<table id="myTable">
  <tr class="header">
    <th class="c1">head1</th>
    <th class="c2">head2</th>
    <th class="c3" style="width: 65%;">head3</th>
    <th class="c4">head4</th>
    <th class="c5">head5</th>
    <th class="c6">head6</th>
  </tr>

  <tr>
    <td class="c1">miao</td>
    <td class="c2">bau</td>
    <td class="c3">roar</td>
    <td class="c4">cip</td>
    <td class="c5">asd</td>
    <td class="c6">africa</td>
  </tr>

</table>

我如何隐藏和显示行的列和值？

4 个答案: