使用jquery根据td的数量设置td的宽度_Jquery_Html Table_Width

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

jquery

使用jquery根据td的数量设置td的宽度,jquery,html-table,width,Jquery,Html Table,Width,我有几个网页，有不同数量的表和不同数量的列我在网上寻找一个jquery spinet，它获取表的列数，并根据列数定义每列的宽度前更新使用我得到的唯一答案，我现在有这个问题，但只有当页面上有一个表时才有效，当有两列时，我不知道如何应用 var num = $("table > td").length; if (num % 4 == 0) { $("table > td:eq(0)").css("width", "50%");

我有几个网页，有不同数量的表和不同数量的列

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

前

更新

使用我得到的唯一答案，我现在有这个问题，但只有当页面上有一个表时才有效，当有两列时，我不知道如何应用

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

我还建议您以有效的方式查看和选择列。由于进行

$（）

调用是一项成本更高的操作：

$("#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或类标识所需的表

编辑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的宽度，是否会将所有tds设置为相同的宽度？这对我不起作用，因为它会将所有tds放在表上，并将所有td设置为相同的宽度。不过还是要谢谢你，是的。我无法给出更具体的答案，因为您没有共享html。因为我不知道你的html结构，所以我只编写了一个通用代码。检查我的edit@Mouhannad：对不起，你是对的，我没有放入html，问题是代码是通用的，适用于多个页面，它们可以有多个表或一个表，因此我没有使用类或id，我只需要遍历每个表，查找表中的列数，并根据列数设置每个表的列宽度。谢谢。愚蠢的问题：为什么不直接在HTML或CSS中设置表格单元格的宽度呢？不要这样做，因为这样做的目的是将代码应用到100个已经创建了大量表格的页面上，而使用HTML或CSS这样做需要一段时间。

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