Jquery根据字段内容设置字段宽度
来博客园很久了,初次写文章,新手,请大牛见谅!
前段时间遇到的问题,通过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根据字段内容设置字段宽度的更多相关文章
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- 帝国cms列表页内容简介字段smalltext去除里面html格式代码 设置方法
帝国cms列表页内容简介字段smalltext去除里面html格式代码帝国cms列表页调用内容简介出现html代码怎么办 近来在用帝国cms的时候,发现一个问题,在列表页调用产品简介的时候出现了这种h ...
- JavaScript(19)jQuery HTML 获取和设置内容和属性
jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...
- 在高并发、高负载的情况下,如何给表添加字段并设置DEFAULT值?
在高并发.高负载的情况下,如何给表添加字段并设置DEFAULT值? 在Oracle 12c之前,当Oracle表数据量上亿时,对表执行“ALTER TABLE XXX ADD COLUMN_XX VA ...
- elasticsearch 5.x 系列之三 mapping 映射的时候的各个字段的设置
首先看来创建一个mapping 来show show: curl -XPUT "master:9200/zebra_info?pretty" -H 'Content-Type: a ...
- Apache/Nginx/IIS日志记录的各个字段内容与含义
一.Apache 1.1 Apache日志文件名称及路径介绍 当我们安装并启动Apache后,Apache会自动生成两个日志文件,这两个日志文件分别是访问日志access_log(在Windows上是 ...
- MySQL设置字段的默认值为当前系统时间
问题产生: 当我们在对某个字段进行设置时间默认值,该默认值必须是的当前记录的插入时间,那么就将当前系统时间作为该记录创建的时间. 应用场景: 1.在数据表中,要记录每条数据是什么时候创建的,应该由数据 ...
- 使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空
使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...
- phpcms_v9 多图字段 内容页,首页,分页自定义字段调用
phpcms_v9 多图字段 内容页,首页,分页自定义字段调用 说明:自定义多图字段名 shigongtu 1 内容页调用 {loop $shigongtu $r} <img src= ...
随机推荐
- EClipse开发NDK流程
EClipse开发NDK流程(现在studio也在2.2之后支持了非常简单,只要创建项目的时候勾选c++支持就可以了) 什么情况下使用ndk,1.保护代码,java很容易反编译,c/c++反汇编比 ...
- redis使用Java学习
一.连接到redis服务 import redis.clients.jedis.Jedis; public class RedisJava { public static void main(Stri ...
- C#中Byte转换相关的函数
1.将一个对象转换为byte对象 public static byte GetByte(object o) { ; if (o != null) { byte tmp; if (byte.TryPar ...
- C# 参数按照ASCII码从小到大排序(字典序)
在对接第三方支付的时候,第三方会要求参数按照ASCII码从小到大排序.如下: public static void requestPay() { Dictionary<string, strin ...
- 浅谈Windows Server APPFABRIC
hi,everyone !真的是好久好久没有update blog了,因为最近忙着备考,没有时间对<数据结构与算法>进行研究学习了.所以,blog一直未更新.today is Friday ...
- C语言多维数组的地址
设有整型二维数组a[3][4]如下: 0 1 2 3 4 5 6 7 8 9 10 11 它的定义为: int a[3][4]={{0,1,2,3},{4,5 ...
- Nutshell.ThreadWorkerPool .Net线程池设计
功能描述: 支持创建多个线程池,并统一管理 支持不同线程池的容量控制,以及最少活动线程的设置 支持不同线程池中活动线程的闲时设置,即线程空闲时间到期后即自动被回收 结构设计: ThreadWorker ...
- Jasper_table_resolve get multiple copies of table in detail band issue
resolve method: (1) put table component into the Title band / Page Header band / Summary band, not i ...
- C 程序提升效率的10种方法
本文向你介绍规范你的C代码的10种方法(引用地址http://forum.eepw.com.cn/thread/250025/1). 1. 避免不必要的函数调用 考虑下面的2个函数: void s ...
- The JRE could not be found.Edit the server and change the JRE location.
之前更改了了一个较低的jdk的版本看了看一个项目的代码,不知所云,然后再改回来, 混乱之中只要启动Tomcat就出现这种错误,还是无法找到JRE,最后如此解决: 在Windows->Prefer ...