日期:2014-05-16  浏览次数:20485 次

JS 计算出GridView width的总长度
C# code
<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 哪里不对

------解决方案--------------------
如果用js控制的话,你要以你生成的HTML代码为准。。你可以贴出来。
------解决方案--------------------
html是程序页面运行后显示的代码。。你这个GridView 在浏览器中显示出来的结果。。
------解决方案--------------------

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); 
}


------解决方案--------------------
HTML code

<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>

------解决方案--------------------
HTML code

<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.ge