隐藏基于单元格值的行=零

时间：2017-02-02 11:45:08

标签： javascript html

嗨，我有一个问题是隐藏在两个中间单元格上有零值的行，中间单元格上的值是从谷歌电子表格动态生成的，下面的代码是好的并隐藏行我写的零值，但是这段代码没有捕获生成的值。

我想要做的是在生成值后隐藏行？

<html>
<head>
    <meta http-equiv="refresh" content="900">
    <link rel="stylesheet" type="text/css" href="http://www.successota.com/dp/example.css"/>
    <script type="text/javascript" src="http://www.successota.com/dp/sortable.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
      google.load('visualization', '1', {packages: ['corechart', 'line']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        // Add your sheets url and range below

        var spreadsheetUrl = ""
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        var dataTable = response.getDataTable();
        // https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
        // getValue(rowIndex, columnIndex)
        //document.getElementById("test").innerHTML = dataTable.getValue(0, 0);
        // --1 --- ok
document.getElementById("B1B").innerHTML = dataTable.getValue(0, 0);
document.getElementById("B1S").innerHTML = dataTable.getValue(0, 1);
document.getElementById("B2B").innerHTML = dataTable.getValue(1, 0);
document.getElementById("B2S").innerHTML = dataTable.getValue(1, 1);
document.getElementById("B3B").innerHTML = dataTable.getValue(2, 0);
document.getElementById("B3S").innerHTML = dataTable.getValue(2, 1);
document.getElementById("B4B").innerHTML = dataTable.getValue(3, 0);
document.getElementById("B4S").innerHTML = dataTable.getValue(3, 1);
document.getElementById("B5B").innerHTML = dataTable.getValue(4, 0);
document.getElementById("B5S").innerHTML = dataTable.getValue(4, 1);
document.getElementById("B6B").innerHTML = dataTable.getValue(5, 0);
document.getElementById("B6S").innerHTML = dataTable.getValue(5, 1);
document.getElementById("B7B").innerHTML = dataTable.getValue(6, 0);
document.getElementById("B7S").innerHTML = dataTable.getValue(6, 1);
document.getElementById("B8B").innerHTML = dataTable.getValue(7, 0);
document.getElementById("B8S").innerHTML = dataTable.getValue(7, 1);
document.getElementById("B9B").innerHTML = dataTable.getValue(8, 0);
document.getElementById("B9S").innerHTML = dataTable.getValue(8, 1);
document.getElementById("B10B").innerHTML = dataTable.getValue(9, 0);
document.getElementById("B10S").innerHTML = dataTable.getValue(9, 1);
document.getElementById("B11B").innerHTML = dataTable.getValue(10, 0);
document.getElementById("B11S").innerHTML = dataTable.getValue(10, 1);
document.getElementById("B12B").innerHTML = dataTable.getValue(11, 0);
document.getElementById("B12S").innerHTML = dataTable.getValue(11, 1);
document.getElementById("B13B").innerHTML = dataTable.getValue(12, 0);
document.getElementById("B13S").innerHTML = dataTable.getValue(12, 1);
document.getElementById("B14B").innerHTML = dataTable.getValue(13, 0);
document.getElementById("B14S").innerHTML = dataTable.getValue(13, 1);
document.getElementById("B15B").innerHTML = dataTable.getValue(14, 0);
document.getElementById("B15S").innerHTML = dataTable.getValue(14, 1);
document.getElementById("B16B").innerHTML = dataTable.getValue(15, 0);
document.getElementById("B16S").innerHTML = dataTable.getValue(15, 1);
document.getElementById("B17B").innerHTML = dataTable.getValue(16, 0);
document.getElementById("B17S").innerHTML = dataTable.getValue(16, 1);
document.getElementById("B18B").innerHTML = dataTable.getValue(17, 0);
document.getElementById("B18S").innerHTML = dataTable.getValue(17, 1);
document.getElementById("B19B").innerHTML = dataTable.getValue(18, 0);
document.getElementById("B19S").innerHTML = dataTable.getValue(18, 1);
document.getElementById("B20B").innerHTML = dataTable.getValue(19, 0);
document.getElementById("B20S").innerHTML = dataTable.getValue(19, 1);
document.getElementById("B21B").innerHTML = dataTable.getValue(20, 0);
document.getElementById("B21S").innerHTML = dataTable.getValue(20, 1);
      } 
    </script>

    <script>
    setInterval(function () {
    var d = new Date();
    var seconds = d.getMinutes() * 60 + d.getSeconds(); //convet 00:00 to seconds for easier caculation
    var fiveMin = 60 * 5; //five minutes is 300 seconds!
    var timeleft = fiveMin - seconds % fiveMin; // let's say 01:30, then current seconds is 90, 90%300 = 90, then 300-90 = 210. That's the time left!
    var result = parseInt(timeleft / 60) + ':' + timeleft % 60; //formart seconds into 00:00 
    document.getElementById('test').innerHTML = "Time left to next 5 min update: "+result;

}, 500) //calling it every 0.5 second to do a count down
    </script>
<script type="text/javascript">
function HideRow (){
//alert("Hello world");
var tbl = document.getElementById('TabCur');         //find the table
var rows = tbl.querySelectorAll('tbody tr');        //find all rows in the table body

for(i = 0; i < rows.length; i++) {                  //iterate through the rows

    var cells = rows[i].querySelectorAll('td');     //find all of the cells in the row

    var flag = true;                                //set flag prior to cell evaluation

    for(j = 1; j < cells.length-1  ; j++) {             //iterate through the cells (starting with the cell at position 2)
    alert(cells[j].text());
        if (cells[j].innerHTML != '0') {            //check if the cell contains '0' (set flag to false if cell is not '0')
            flag = false;                           
        }
    }

    if(flag) { 
        rows[i].classList.add('hide');              //hide the row if the falg remained true (i.e. none of the cells contained a value other than '0'
    }
}
}
</script>   
<style>
.hide { 
    display: none; 
}
</style>    
</head>
<body style="background-color:#f6fbfb;a:link,a:visited,a:hover,a:active {color:#ffffff;}">

<div id="test" style="text-align: center;color:094f68;"></div>
samir
<table class="sortable" id="TabCur" style="vertical-align: top; width: 100%; height:20px; margin-left: auto; margin-right: auto; border-color:#777777;border-width: 1px;" cellspacing="2" cellpadding="2"><caption style="text-align: center;"><span style="color: #ccffff;"></span></caption>
<thead>
<tr style="background-color:#094f68;color:ffffff;line-height:50px">
<td style="text-align: center;" width="40%">A</td>
<td style="text-align: center;" width="10%">B</td>
<td style="text-align: center;" width="10%">C</td>
<td style="text-align: center;" width="40%">D</td>
</tr>
</thead>
<tbody>

<tr style="background-color:#f2eab3;line-height:30px">
<td>Test1</td>
<td style="text-align: center;"><p id="B2B"></p></td>
<td style="text-align: center;"><p id="B2S"></p></td>
<td style="text-align: right;">test1</td>
</tr>
<tr style="background-color:#f2eab3;line-height:30px">
<td>EAL</td>
<td style="text-align: center;"><p id="B3B"></p></td>
<td style="text-align: center;"><p id="B3S"></p></td>
<td style="text-align: right;">Test2</td>
</tr>
<tr style="background-color:#f2eab3;line-height:30px">
<td>test3</td>
<td style="text-align: center;"><p id="B4B"></p></td>
<td style="text-align: center;"><p id="B4S"></p></td>
<td style="text-align: right;">Test3</td>
</tr>
<tr style="background-color:#f2eab3;line-height:30px">
<td>TEST4</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: right;">TEST4</td>
</tr>
</tbody>
</table>
</body>
<script>
window.onload = HideRow;
</script>
</html>

当我尝试提醒输出时，我发现了这行中的问题

 if (cells[j].innerHTML != '0') {

代码获取此值：

<p id="B1S"></p>
<p id="B4S"></p>
<p id="B4S"></p>
0

唯一的最后一行被接受并隐藏但其他行返回不匹配的值

谢谢。

1 个答案:

答案 0 :(得分：0)

我解决了“感谢上帝”

使用

if (cells[j].getElementsByTagName('strong')[0].getElementsByTagName('p')[0].innerHTML != '0')

而不是

 if (cells[j].innerHTML != '0') {

这就是全部

感谢@Bardo和@Selim Ajimi的良好纠正

相关问题
最新问题