使用jquery根据td的No设置td的宽度 [英] Set width of td depending on No of td using jquery
问题描述
我有几个网页，其中包含不同数量的不同数量的表格。
I have several web pages with different amount of tables with different amount of columns.
我正在网上寻找一个获得列数的jquery spinet的表格和根据列数将定义每列的宽度。
I was looking on the net for a jquery spinet which gets the number of columns of the table and depending on the number of columns will define the width of each column.
前。
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%";
}
更新
使用我给出的唯一答案我现在有这个，但只有在页面上有一个表格时才有效，当有两列时我无法弄清楚如何申请。
Using the only answer I was given I have this at the moment but only works when there is one table on the page and I could not figure out how to apply when there are two columns.
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列。
This is an example of the html, but the code will apply to lots of pages with different No of Tables but all tables will have either 2,3 or 4 columns.
<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");
我希望这就是你要找的东西
I hope this was what you were looking for
修改
指定特定列的宽度：
//如果你为每个td指定了一个id
//if you've specified an id to each td
$("#td1").width(td1Width+"px");
//如果您只是使用类来识别它们
//if you just use classes to identify them
$("td.td1", "#table1").width(td1Width+"px");
我还建议你研究 find（）和结束（）以有效的方式选择列。因为进行 $（）调用是一项更昂贵的操作：
I would also recommend you to look into find() and end() to select columns in an efficient way. since making a $() call is a more expensive operation:
$("#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确定您需要的表格。
"table" will select all tables on the page; use id or class to identify which table you require.
编辑3（最终!!）
好的，现在我可以看到所有代码我可以给出更好的答案。试试这个：
Ok, now i can see all the code i can give a better answer. try this:
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
}
});
我希望这是一个更好的答案：）
I hope this is a better answer :)
这篇关于使用jquery根据td的No设置td的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
