Javascript 隐藏列的代码未按预期工作

Question

我有一个 Gridview，我想根据某些条件在其中隐藏一列。所以为此我写了一个js代码如下

function GridExpInfo_ClientInsert() {
    var rowVal = GridExpInfo.Rows.length - 1;
    for (i = 0; i < GridExpInfo.Rows.length; i++) {
        if (GridExpInfo.Rows[i].Cells[7].Value == "" || GridExpInfo.Rows[i].Cells[7].Value == "0") {
            document.getElementById('GridExpInfo_ob_GridExpInfoBodyContainer_ctl33_'+rowVal+'_ctl00_'+rowVal+'_Button1_'+rowVal+'').style.display = "none";
        } else {                        
        }
    } 
}

它工作正常，直到添加了一行。但是，如果我去添加第二行，第一行再次获得 show 并且第二（当前）行获得 hide.

那么如何隐藏所有值为0

的行

Answer 1

看起来您正试图在从 asp.net 继承母版页的页面中隐藏一列。如果是这种情况，ct133 和 ct100 名称将在您修改页面时 100% 更改。

你应该给它们分配一个 CSS CLASS 和 hide/show 每个元素 CSS CLASS

在原版 JS 中

document.getElementsByClassName('HideThisColumn')[0].style.visibility = 'hidden';

和JQUERY

 $(".HideThisColumn").hide();

编辑根据 OP 的评论 我的版本太低 根据 Mozilla Developer Network IE 9+ 可以使用此功能。你是说你是针对 IE 8 开发的吗？

Answer 2

嗯，尝试更简单地分解您的代码：

(assume obj.rows.length = 5)
clientInsert () {
    var rowVal = (5 - 1) = 4;
    for ( var i = 0; i < 5; i++ ) {
       // first Iteration...
       if ( obj.rows [ 0 ].cells [ 7 ].value == '' ||
            obj.rows [ 0 ].cells [ 7 ].value == "0" ) {
         var id = 'id_' + 4 + 'moreId_' + 4; // 'id_4_moreId_4'
         document.getElementById ( id ) = "none";
       }
       // second Iteration...
       if ( obj.rows [ 1 ].cells [ 7 ].value == '' ||
            obj.rows [ 1 ].cells [ 7 ].value == "0" ) {
         var id = 'id_' + rowVal + 'moreId_' + rowVal;
         // ID is always 'id_4_moreId_4'
         document.getElementById ( id ) = "none";
       }
    }
}

据我所知，您总是选择相同的 DOM 元素；您的 ID 永远不会改变。

有一件事，远离ID似乎更"modern"。使用常见的 CSS 样式标记这些目标 DOM 元素将使您可以使用直接的选择器，而不必弄乱所有 ID 内容。也许这在您的上下文中不起作用，但需要考虑一些事情。

Answer 3

经过一番研究和尝试，我终于破解了这个逻辑。这是我所做的并且对我有用。

function GridExpInfo_ClientInsert() {
        var rowVal = "0";                  // assigned variable with value as 0
        for (i = 0; i < GridExpInfo.Rows.length; i++) {                
            rowVal = i;                   // assigning values which always takes the value of i
            if (GridExpInfo.Rows[i].Cells[7].Value == "" || GridExpInfo.Rows[i].Cells[7].Value == "0") {
                 document.getElementById('GridExpInfo_ob_GridExpInfoBodyContainer_ctl33_' + rowVal + '_ctl00_' + rowVal + '_Button1_' + rowVal + '').style.display = "none";
             }
            else {
            }
        }
    }

Javascript 隐藏列的代码未按预期工作

Javascript code is not working as expected for hiding column

javascript

show

hide