来博客园很久了,初次写文章,新手,请大牛见谅!
前段时间遇到的问题,通过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代码:
class="brush:javascript;gutter:true;">$(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的宽度 } });
如果大家有好的实现方式,还请多多留言,在此表示感谢,小菜的进步离不开大家的支持···