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

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

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

 <table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<td>行1列4</td>
</tr>
</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的宽度
}
});

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

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. SQL Server还原和一些小发现

    1.当数据库已经建好在DB里,SQL Server 2005 和 SQL Server 2008使用.Bak文件还原的时候,会出现 error : "The backup set holds ...

  2. Oracle start with connect by prior 用法

    Oracle start with connect by prior 用法    语法: select * from 表名 where 条件1 start with 条件2 connect by pr ...

  3. silverlight 生成图表 WCF 解析XML代码.svc.cs 文件

    silverlight 调用wcf 文件代码 private ListItem AnalyzeXML(string XMLCode, string Reportdate, string ChartNa ...

  4. NSSet使用小结

    http://blog.csdn.net/ms2146/article/details/8657011

  5. CocoaPod安装

    http://www.360doc.com/content/14/0309/10/11029609_358970353.shtml http://www.bubuko.com/infodetail-4 ...

  6. (四)CodeMirror - API

    内容相关 cm.getValue() cm.setValue() cm.getRange() editor.getRange({line:1},{line:2}) // 获取内容块字符 cm.repl ...

  7. Linux中的常见配置文件

    网络服务端口 /etc/services

  8. 慕课linux学习笔记(五)常用命令(2)

    链接命令 Ln [原文件] [目标文件] -s 表示创建软链接 硬链接特征: 拥有相同的i节点和存储block块,可以看做是同一个文件 通过i节点识别 不能跨分区 不能针对目录用 软链接特征: 不同的 ...

  9. React/React Native的 ES5 ES6 写法对照

      ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React;   import Re ...

  10. Linux下的正则表达式(基础)

    grep -n 'the' text.txt 搜寻含有the的部分(n代表现实显示行号) grep -vn 'the' text.txt 搜寻不含有the的部分(n代表现实显示行号) grep -vn ...