Jquery根据字段内容设置字段宽度_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Jquery根据字段内容设置字段宽度

Jquery根据字段内容设置字段宽度

 2013/7/13 10:15:15  Mensar  博客园  我要评论(0)
  • 摘要:来博客园很久了,初次写文章,新手,请大牛见谅!前段时间遇到的问题,通过gridview后台动态生成table,列和行数量未知,要求根据每个单元格内容的多少,设置宽度,每一列选择本列最大的宽度。table生成的样式如下,没有找到直接通过后台解决的方案,遂决定通过前台Jquery,后期加工,虽然每行的列数是未知的,但由于有分页,每页最多显示10条,所以效率问题还不算是个问题。1<table>2<tr>3<th>标题1</th>4<th>
  • 标签:内容 jQuery

  来博客园很久了,初次写文章,新手,请大牛见谅!

  前段时间遇到的问题,通过gridview后台动态生成table,列和行数量未知,要求根据每个单元格内容的多少,设置宽度,每一列选择本列最大的宽度。

  table生成的样式如下,没有找到直接通过后台解决的方案,遂决定通过前台Jquery,后期加工,虽然每行的列数是未知的,但由于有分页,每页最多显示10条,所以效率问题还不算是个问题。

 1 <table>
 2     <tr>
 3         <th>标题1</th>
 4         <th>标题2</th>
 5         <th>标题3</th>
 6         <th>标题4</th>
 7     </tr>
 8     <tr>
 9           <td>行1列1</td>
10           <td>行1列2</td>
11           <td>行1列3</td>
12           <td>行1列4</td>
13      </tr>
14 </table>

 

Jquery代码:

class="brush:javascript;gutter:true;">$(function () {
       var columns = $("table tr td").length / ($("table tr").length - 1);  //计算列数
     for (var i = 1; i <= columns; i++) {
             var a = new Array();
             var j = 0;
             var max = 0;
             $("table  tr td:nth-child(" + i + ")").each(function () {  //遍历每一列
               var data = $(this).html();
                     a[j] = data.length * 13;//假设每个字符13px
                     if (a[j] > max)
                         max = a[j];
                     $(this).css({ "width": (data.length * 13) + "px" });//设置每个td的宽度
                    j++;
              });
             if (max > 110)//默认宽度为110px
                 $("table tr th:eq(" + (i - 1) + ")").css({ "width": max + "px" });//设置标题th的宽度
         }
 });

  如果大家有好的实现方式,还请多多留言,在此表示感谢,小菜的进步离不开大家的支持···

上一篇: 关于多线程学习总结(二) 了解线程的属性及方法 下一篇: 没有下一篇了!
发表评论
用户名: 匿名