设置td的宽度取决于使用jQuery的td的数量

我有几个不同数量的表格，并且列的数量不同。设置td的宽度取决于使用jQuery的td的数量

我在网上寻找一个jQuery Spinet它获取表的列数，并根据列数将定义每列的宽度。

Ex。

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>

来源

2010-10-14 Amra

愚蠢的问题：你为什么不你的HTML或CSS直接设定表格单元格宽度？ – RoToRa 2010-10-14 10:35:33

没有这么倾倒，因为想法是将代码应用到已经创建了大量表格的100个页面，并且使用html或css来完成这些操作需要一段时间。 – Amra 2010-10-14 10:39:11

要得到列数：

var num = $("#table > tr > td").length;

要指定宽度：

$("#table > tr > td").width(w + "px");

我希望这是你要找的

编辑：

要指定一个特定的列宽：

//如果你指定的ID给每个TD

$("#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;

“表”，将选择页面上的所有表格;使用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 
    } 
});

我希望这是一个更好的答案:)

来源

2010-10-14 09:19:26 Mouhannad

如果有'rowspan'就会出现问题。 – Reigel 2010-10-14 09:27:06

@Mouhannad：谢谢你的回答。要设置td的宽度，是不是会为所有tds设置相同的宽度？ – Amra 2010-10-14 09:27:43

这对我来说并不合适，因为它获取了桌子上的所有tds，并为所有td设置了相同的宽度。不过谢谢。 – Amra 2010-10-14 09:42:02

设置td的宽度取决于使用jQuery的td的数量

回答

相关问题