Amr*_*mra 2 jquery html-table width
我有几个网页,不同数量的表具有不同的列数.
我正在网上寻找一个jquery spinet,它获取表的列数,并根据列数定义每列的宽度.
防爆.
if (noOfTdOnTable == 2) {
tdWidth = "50%";
}
if (noOfTdOnTable == 3) {
td1Width = "40%";
td2Width = "40%";
td3Width = "20%";
}
if (noOfTdOnTable == 4) {
td1Width = "35%";
td2Width = "25%";
td3Width = "15%";
td4Width = "15%";
}
更新
使用我给出的唯一答案我现在有这个,但只有在页面上有一个表时才有效,当有两列时我无法弄清楚如何应用.
var num = $("table > td").length;
if (num % 4 == 0) {
$("table > td:eq(0)").css("width", "50%");
$("table > td:eq(1)").css("width", "30%");
$("table > td:eq(2)").css("width", "10%");
$("table > td:eq(3)").css("width", "10%");
}
if (num % 3 == 0) {
$("table > td:eq(0)").css("width", "50%");
$("table > td:eq(1)").css("width", "40%");
$("table > td:eq(2)").css("width", "10%");
}
这是html的一个示例,但代码将适用于具有不同表格的许多页面,但所有表格将具有2,3或4列.
<html>
<table>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
<table>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
<table>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</html>
要获得列数:
var num = $("#table > tr > td").length;
要指定宽度:
$("#table > tr > td").width(w + "px");
我希望这就是你要找的东西
编辑:
要指定特定列的宽度:
//如果你为每个td指定了一个id
$("#td1").width(td1Width+"px");
//如果您只是使用类来识别它们
$("td.td1", "#table1").width(td1Width+"px");
我还建议你研究find()和end()以有效的方式选择列.因为$()拨打电话是一项更昂贵的操作:
$("#table1").find("#td1").width(td1Width+"px").end().find("#td2")...
编辑2
试试这个
$("table > tr > td:eq(0)").css("width", "50%");
甚至更好
$("table > tr > td").eq(0).css("width", "50%").end()
.eq(1).css(...etc;
"table"将选择页面上的所有表格; 使用id或class来标识您需要的表.
编辑3(最终!!)
好的,现在我可以看到所有代码,我可以给出更好的答案.试试这个:
var num;
var $tds;
$("table").each(function(i, t) {
$tds = $("td", t);
num = $tds.length;
if (num % 4 == 0) {
$tds.eq(0).css("width", "50%").end()
.eq(1).css("width", "30%").end()
.eq(2).css("width", "10%").end()
.eq(3).css("width", "10%");
}
if (num % 3 == 0) {
//etc
}
});
我希望这是一个更好的答案:)
| 归档时间： |
|
| 查看次数： |
13708 次 |
| 最近记录： |