zoukankan      html  css  js  c++  java
  • 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代码:

    $(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的宽度
             }
     });
    

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

  • 相关阅读:
    javascript专业八级测试答案整理
    HTML中的attribute和property
    Ajax的原理和应用
    jQuery提交form表单
    使用JavaScript和Canvas实现下雪动画效果
    JavaScript经典代码总结
    从HTML5移动应用现状谈发展趋势
    前端单元测试总结及测试工具介绍
    Web缓存基础:术语、HTTP报头和缓存策略
    为IIS Express添加MIME映射
  • 原文地址:https://www.cnblogs.com/yyx03/p/3185899.html
Copyright © 2011-2022 走看看