代码之家 › 专栏 › 技术社区 › Amra

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

width html-table jquery

2

Amra · 技术社区 · 15 年前

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

前任。

  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>    
    <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>

1 回复 | 直到 9 年前

1

7

Mouhannad 15 年前

要获取列数:

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

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