使用 jquery 根据 td 的数量设置 td 的宽度答案

【问题标题】：Set width of td depending on No of td using jquery使用 jquery 根据 td 的数量设置 td 的宽度
【发布时间】：2011-04-25 07:21:03
【问题描述】：

我有几个网页，其中包含不同数量的表格和不同数量的列。

我在网上寻找一个 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>

【问题讨论】：

愚蠢的问题：为什么不直接在 HTML 或 CSS 中设置表格单元格的宽度？
没有，因为我们的想法是将代码应用到已经使用大量表格创建的 100 个页面，而使用 html 或 css 执行此操作需要一段时间。

标签： jquery html-table width

【解决方案1】：

获取列数：

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
    }
});

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

【讨论】：

如果有rowspan会有问题
@Mouhannad：感谢您的回答。设置td的宽度，不就是给所有的td设置同样的宽度吗？
这对我不起作用，因为它将所有 td 放在桌子上并为所有 td 设置相同的宽度。不过还是谢谢。
是的。由于您没有分享您的 html，我无法给出更具体的答案。所以因为我不知道你的html结构我只是做了一个通用代码。检查我的编辑
@Mouhannad：对不起，你是对的，我没有放 html，问题是代码是通用的，适用于多个页面，它们可以有多个表或一个，因此我没有使用类或者 id 我只需要遍历每个表，找到表上的列数并根据列数设置每个表的列宽。谢谢。