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

  前段时间遇到的问题,通过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代码:

  1. $(function () {
  2. var columns = $("table tr td").length / ($("table tr").length - 1); //计算列数
  3. for (var i = 1; i <= columns; i++) {
  4. var a = new Array();
  5. var j = 0;
  6. var max = 0;
  7. $("table tr td:nth-child(" + i + ")").each(function () { //遍历每一列
  8. var data = $(this).html();
  9. a[j] = data.length * 13;//假设每个字符13px
  10. if (a[j] > max)
  11. max = a[j];
  12. $(this).css({ "width": (data.length * 13) + "px" });//设置每个td的宽度
  13. j++;
  14. });
  15. if (max > 110)//默认宽度为110px
  16. $("table tr th:eq(" + (i - 1) + ")").css({ "width": max + "px" });//设置标题th的宽度
  17. }
  18. });

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

Jquery根据字段内容设置字段宽度的更多相关文章

  1. 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  2. 帝国cms列表页内容简介字段smalltext去除里面html格式代码 设置方法

    帝国cms列表页内容简介字段smalltext去除里面html格式代码帝国cms列表页调用内容简介出现html代码怎么办 近来在用帝国cms的时候,发现一个问题,在列表页调用产品简介的时候出现了这种h ...

  3. JavaScript(19)jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...

  4. 在高并发、高负载的情况下,如何给表添加字段并设置DEFAULT值?

    在高并发.高负载的情况下,如何给表添加字段并设置DEFAULT值? 在Oracle 12c之前,当Oracle表数据量上亿时,对表执行“ALTER TABLE XXX ADD COLUMN_XX VA ...

  5. elasticsearch 5.x 系列之三 mapping 映射的时候的各个字段的设置

    首先看来创建一个mapping 来show show: curl -XPUT "master:9200/zebra_info?pretty" -H 'Content-Type: a ...

  6. Apache/Nginx/IIS日志记录的各个字段内容与含义

    一.Apache 1.1 Apache日志文件名称及路径介绍 当我们安装并启动Apache后,Apache会自动生成两个日志文件,这两个日志文件分别是访问日志access_log(在Windows上是 ...

  7. MySQL设置字段的默认值为当前系统时间

    问题产生: 当我们在对某个字段进行设置时间默认值,该默认值必须是的当前记录的插入时间,那么就将当前系统时间作为该记录创建的时间. 应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,应该由数据 ...

  8. 使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空

    使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...

  9. phpcms_v9 多图字段 内容页,首页,分页自定义字段调用

    phpcms_v9 多图字段 内容页,首页,分页自定义字段调用 说明:自定义多图字段名 shigongtu 1 内容页调用 {loop $shigongtu $r}      <img src= ...

随机推荐

  1. Windows命令行(DOS命令)教程-5 (转载)http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_4.html

    5. copy copy在英文中是复制的意思 [功能] 复制一个或一组文件到指定的磁盘或目录中 [格式] copy [C:][path][filename.ext] [C:][path]filenam ...

  2. SQL cmd 实用工具学习 -1

    启动 sqlcmd 实用工具并连接到 SQL Server 的默认实例 在"开始"菜单上,单击"运行". 在"打开"框中,键入 cmd,然后 ...

  3. Shiro 权限框架使用总结

    我们首先了解下什么是shiro ,Shiro 是 JAVA 世界中新近出现的权限框架,较之 JAAS 和 Spring Security,Shiro 在保持强大功能的同时,还在简单性和灵活性方面拥有巨 ...

  4. 洛谷 P1656 炸铁路

    P1656 炸铁路 题目提供者kkksc03 标签图论搜索/枚举洛谷原创 难度普及/提高- 题目描述 因为某国被某红色政权残酷的高压暴力统治.美国派出将军uim,对该国进行战略性措施,以解救涂炭的生灵 ...

  5. JavaScript语法学习笔记

    1.关于执行JavaScript代码的方法: 第一种方法是将JavaScript代码放到文档<head>标签中的<script>标签之间: <head>     & ...

  6. eclipse修改字体

    修改xml字体: window→Preferences→General→Colors and Fonts→Basic→Text Font

  7. CC2530定时器1的模模式中断

    CC2530定时器1的模模式中断void timer1SInit(void){ T1CCTL0 = 0; T1CTL &= ~0x0F; //clear register T1CTL |= 0 ...

  8. Linux - Reset a MySQL root password

    Use the following steps to reset a MySQL root password by using the command line interface. Stop the ...

  9. JDK PATH 和 CLASSPATH环境变量的作用及其配置

    (1)PATH环境变量的作用 在安装JDK程序之后,在安装目录下的bin目录中会提供一些开发Java程序时必备的工具程序. 对于Java的初学者,建议在命令符模式下使用这些工具程序编译运行Java程序 ...

  10. (转)syslog日志等级

    设施.优先级”(facility.priority)设施(facility): kern 0 内核日志消息 user 1 随机的用户日志消息 mail 2 邮件系统日志消息 daemon 3 系统守护 ...