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

发布于 2024-09-27 22:02:14 字数 1750 浏览 3 评论 0原文

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

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

原文

I have several web pages with different amount of tables with different amount of columns.

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.

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%";
    }

Update

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

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

债姬 2024-10-04 22:02:14

要获取列数：

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

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

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

To get the number of columns:

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

To specify the width:

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

I hope this was what you were looking for

Edit:

To specify the width to a specific column:

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

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

Edit 2

try this instead

$("table > tr > td:eq(0)").css("width", "50%");

or even better

$("table > tr > td").eq(0).css("width", "50%").end()
                    .eq(1).css(...etc;

"table" will select all tables on the page; use id or class to identify which table you require.

Edit 3 (final!!)

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

回复收藏 0 原文

~没有更多了~