JS 计算出GridView width的总长度

Question

<asp:GridView ID="gvHeader" runat="server" AllowSorting="True" AutoGenerateColumns="False" >
                                <HeaderStyle CssClass="gvHeader" />
                                <Columns>
                                    <asp:BoundField HeaderText="序号">
                                        <HeaderStyle Width="30" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="编码" SortExpression="ShowCode">
                                        <HeaderStyle Width="100" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="名称" SortExpression="MName">
                                        <HeaderStyle Width="300" />
                                    </asp:BoundField>
                               </Columns>
                            </asp:GridView>想要通过JS 计算出Width的总和var s=document.getElementsByTagName("HeaderStyle");    count=0     哪里不对   

Answer 1

如果用js控制的话，你要以你生成的HTML代码为准。。你可以贴出来。

Answer 2

..........相关的 偶都贴出来了这个JS 报错的<script language="javascript">
    var s=document.getElementsByTagName("HeaderStyle");
    var con=0;
    for(var i=0;i<s.length;i++){ 
        con+= parseInt(s[i].width); 
    }
    </script>

Answer 3

html是程序页面运行后显示的代码。。你这个GridView 在浏览器中显示出来的结果。。

Answer 4

偶本来就是aspx页面啊JS 偶的思路是  找到 HeaderStyle 一共有几个
循环 把每个width  相加  计算总和getElementsByTagName只能在html页面用aspx页面 怎么实现啊 

Answer 5

var gv = document.getElementById("<%=gvHeader.ClientID%>");

Answer 6

<asp:GridView ID="gvHeader" runat="server" AllowSorting="True" AutoGenerateColumns="False"
                                OnRowCreated="gvHeader_RowCreated" OnSorting="gvHeader_Sorting">
                                <HeaderStyle CssClass="gvHeader" />
                                <Columns>
                                    <asp:BoundField HeaderText="序号">
                                        <HeaderStyle Width="30" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="编码" SortExpression="ShowCode">
                                        <HeaderStyle Width="100" />
                                    </asp:BoundField>
                                    </Columns>
                            </asp:GridView>
                            <div id="divMain" style="overflow: auto; height: 250px;width:<% %>">//////////width等于JS计算出总长度
                                <asp:GridView ID="gvBody" runat="server" AutoGenerateColumns="False" ShowHeader="False" 
                                    <SelectedRowStyle CssClass="gvSelectedRow" />
                                    <RowStyle CssClass="gvRow" />
                                    <Columns>
                                        <asp:TemplateField HeaderText="序号">
                                            <ItemStyle HorizontalAlign="Center" />
                                            <ItemTemplate>
                                                <asp:Label ID="Label1" runat="server" Text='<%# (int)DataBinder.Eval(Container, "RowIndex")+1 %>'>
                                                </asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ShowCode" />
                                    </Columns>
                                </asp:GridView>
                            </div>

Answer 7

<table cellspacing="0" rules="all" border="1" id="gvHeader" style="border-collapse: collapse;">
    <tr class="gvHeader">
        <th scope="col" style="width: 30px;">
            序号
        </th>
        <th title="点击对&lt;分类编码>进行排序" scope="col" style="width: 100px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$ShowCode')">分类编码</a>
        </th>
        <th title="点击对&lt;名称>进行排序" scope="col" style="width: 300px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$MName')">名称</a>
    </tr>
</table>
IE脚本 显示的内容想先获取一共有几个th
var width = document.getElementsByTagName("th")；
alert(width);
为什么还是显示0啊

Answer 8

    var gv = document.getElementById("gvHeader");
    var th = gv.getElementsByTagName(...);
    var con=0;
    
            for(var i=0;i<th.length;i++){ 
                var width=th[i].style.width;
                con+= parseInt(width); 
            }
            
           

Answer 9

<table cellspacing="0" rules="all" border="1" id="gvHeader" style="border-collapse: collapse;">
    <tr class="gvHeader">
        <th scope="col" style="width: 30px;">
            序号
        </th>
        <th title="点击对&lt;分类编码>进行排序" scope="col" style="width: 100px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$ShowCode')">分类编码</a>
        </th>
        <th title="点击对&lt;名称>进行排序" scope="col" style="width: 300px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$MName')">名称</a>
    </tr>
</table>
<script>
var width = document.getElementsByTagName("th");
alert(width.length);
</script>

Answer 10

<table cellspacing="0" rules="all" border="1" id="gvHeader" style="border-collapse: collapse;">
    <tr class="gvHeader">
        <th scope="col" style="width: 30px;">
            序号
        </th>
        <th title="点击对&lt;分类编码>进行排序" scope="col" style="width: 100px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$ShowCode')">分类编码</a>
        </th>
        <th title="点击对&lt;名称>进行排序" scope="col" style="width: 300px;">
            <a href="javascript:__doPostBack('gvHeader','Sort$MName')">名称</a>
    </tr>
</table>
<script>
var width = document.getElementById("gvHeader");
alert(width.offsetWidth);
</script>