刪除表中的值

-1

我有HTML代碼像this`刪除表中的值

<h4 id="dd">Resource usage</h4> 
     <table border="1" class="dataframe table table-striped table-bordered table-hover"> 
    <thead> 
    <tr style="text-align: right;"> 
     <th>peak_value</th> 
     <th>resource_name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>NA</td> 
     <td>NA</td> 
    </tr> 
    <tr> 
     <td>NA</td> 
     <td>NA</td> 
    </tr> 
    </tbody> 
</table>

我取出由database.So表，數據是動態創建的。現在我不想顯示錶，如果它有整行只有「NA」值（即），值NA使用JavaScript。請幫我在這裏

來源

2017-06-22 bing

你嘗試過什麼做到這一點？向我們展示一些代碼。 –

如果至少有一行只有「NA」值，即使其他行具有非「NA」值，你是否還想隱藏整個表？或者你的意思是說，只有*每行*只有「NA」值才能隱藏它。 – nnnnnn

使用jQuery.filter具有文本的所有td元素過濾器"NA"
檢查過濾收集的長度與各自tr元素td元素的長度
如果tr有td元素並且長度相等，hide()tr元素。

$('tr').each(function() { 
 
    var tdElems = $(this).find('td'); 
 
    var filtered = tdElems.filter(function() { 
 
    return this.textContent.trim() === 'NA'; 
 
    }); 
 
    if (tdElems.length && (filtered.length === tdElems.length)) { 
 
    $(this).hide(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4 id="dd">Resource usage</h4> 
 
<table border="1" class="dataframe table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr style="text-align: right;"> 
 
     <th>peak_value</th> 
 
     <th>resource_name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>NA</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>NA</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-06-22 04:46:48 Rayon

您可以在td元素進行迭代，並查看是否有與非NA值的任何元素，如果沒有隱藏的表像

var table = document.querySelector('#dd + table'); 
 
var toShow = Array.from(table.querySelectorAll('td')).some(td => td.innerHTML.trim() != 'NA');; 
 
if (!toShow) { 
 
    table.style.display = 'none'; 
 
}

<h4 id="dd">Resource usage</h4> 
 
<table border="1" class="dataframe table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr style="text-align: right;"> 
 
     <th>peak_value</th> 
 
     <th>resource_name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>NA</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>NA</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

演示：Fiddle

如果你要處理的行明智

var table = document.querySelector('#dd + table'); 
 

 
var tableHasNonNAValue = false; 
 
Array.from(table.querySelectorAll('tbody tr')).forEach(tr => { 
 
    var hasNonNAValue = Array.from(tr.querySelectorAll('td')).some(td => td.innerHTML.trim() != 'NA'); 
 
    tableHasNonNAValue = tableHasNonNAValue || hasNonNAValue; 
 
    if (!hasNonNAValue) { 
 
    tr.style.display = 'none'; 
 
    } 
 
}); 
 
if (!tableHasNonNAValue) { 
 
    table.style.display = 'none'; 
 
}

<h4 id="dd">Resource usage</h4> 
 
<table border="1" class="dataframe table table-striped table-bordered table-hover"> 
 
    <thead> 
 
    <tr style="text-align: right;"> 
 
     <th>peak_value</th> 
 
     <th>resource_name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>NA1</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    <tr> 
 
     <td>NA</td> 
 
     <td>NA</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

演示：Fiddle

來源

2017-06-22 04:46:51

刪除表中的值

回答

相關問題