日期:2014-05-17  浏览次数:20406 次

脚本隐藏或显示列,为什么各个控件之间会出现空隙?
我把GridView都转换成模板,给各个模板都添加了长度限制,然后使用脚本和CheckBoxList,来隐藏GridView的某些列。但GridView总是在隐藏某些列后,剩下的列总是对不齐,各个控件之间总是存在空隙,不知道该怎么调整。。。请帮忙看看,谢谢!请留意看“效果截图”!红框框就是多余的空隙

--------------------完整代码---------------------
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Try_Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 500%;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
         <script type="text/javascript">
            function bb() {
                var CheckBoxList = document.getElementById("CheckBoxList_All");
                if (CheckBoxList.tagName == "TABLE") {
                    for (var a = 0; a < 102; a++) {

                        if (CheckBoxList.rows[a].cells[0].childNodes[0].checked == false) {
                            var table = document.getElementById("GridView_Search");
                            for (var i = 0; i < table.rows.length - 1; i++) {
                                table.rows[i].cells[a].style.display = "none";
                            }
                        }
                        else {
                            var table = document.getElementById("GridView_Search");
                            for (var i = 0; i < table.rows.length - 1; i++) {
                                table.rows[i].cells[a].style.display = "inline";
                            }
                        }
                    }
                }
            }
            
            
            </script>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table cellpadding="0" cellspacing="0" class="style1">
            <tr>
                <td>
                    <asp:CheckBoxList ID="CheckBoxList_All" runat="server" >
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                        <asp:ListItem>3</asp:ListItem>
                        <asp:ListItem>4</asp:ListItem>
                        <asp:ListItem>5</asp:ListItem>
                        <asp:ListItem>6</asp:ListItem>
                        <asp:ListItem>7</asp:ListItem>
                        
                    </asp:CheckBoxList>
                    <input id="Button1" type="button" value="123" onclick="bb();"/>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="GridView_Search" runat="server" AutoGenerateColumns="False" 
                        DataKeyNames="PRID" DataSourceID="SqlDataSource_Search" CellPadding="0">
                        <Columns>
                            <asp:TemplateField HeaderText="年份" SortExpression="ReceivableID" HeaderStyle-Width="33" ItemStyle-Width="33" FooterStyle-Width="33"  ControlStyle-B