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

  前段时间遇到的问题,通过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. LinkedList : 双向链表与实现

    所谓双向链表: (由此图可见老夫深厚的画功) 链表,就是由一个一个的节点连接组成. 在这里,每一个节点都是由三部分组成:上一个节点.当前节点的元素.下一个节点 当链表中只有一个节点的时候,这个节点指向 ...

  2. 实验八 sqlite数据库操作

    实验报告 课程名称 基于Android平台移动互联网开发 实验日期 2016年5月3日 实验项目名称 SQLite数据库操作 实验地点 S30010 实验类型 □验证型    √设计型    □综合型 ...

  3. 根据identifier从StoryBoard中获取对象,UIButton的图片文件位置

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  5. [Powershell] FTP Download File

    # Config $today = Get-Date -UFormat "%Y%m%d" $LogFilePath = "d:\ftpLog_$today.txt&quo ...

  6. PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念

    PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念 据我个人所知,windows下的cmd shell除了能够通过修改系统参数来对其中的环境变量 ...

  7. php安装pear、pecl

    安装pear.pecl特别简单,只需要两步. wget http://pear.php.net/go-pear.phar php go-pear.phar [root@localhost bin]# ...

  8. 40个UI设计工具

    摘要:用户界面设计在持续的基础上不断成长和演变.要跟上时代,你需要关注趋势.新资源和正被实施和谈论的新技术. 导读:用户界面设计在持续的基础上不断成长和演变.要跟上时代,你需要关注趋势.新资源和正被实 ...

  9. HDU 5424 Rikka with Graph II

    题目大意: 在 N 个点 N 条边组成的图中判断是否存在汉密尔顿路径. 思路:忽略重边与自回路,先判断是否连通,否则输出"NO",DFS搜索是否存在汉密尔顿路径. #include ...

  10. C++默认构造函数的一点说明

    大多数C++书籍都说在我们没有自己定义构造函数的时候,编译器会自动生成默认构造函数.其实这句话我一直也是 深信不疑.但是最近看了一些资料让我有了一点新的认识. 其实我觉得大多数C++书籍之所以这样描述 ...