我如何隱藏並顯示行的列和值？

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

如果你想你的選擇列表中對應顯示在表格中隱藏特定列整合。最好給id /類別in each第and td`與選擇等級中的值相同。試試這個：

選擇將改變表的外觀：

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

Answer 2

你剛剛起步的DOM元素，改變樣式屬性，你必須使用.style屬性，像這樣：

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

Answer 3

Display是一個屬性，而不是功能。要改變顯示方式，使用方法：

rigaZona.style.display = 'none'; 

而且，顯示器有一個像塊，沒有，inline-block的等選項，但有作爲""

Answer 4

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; 
}