設置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的數量

回答

相關問題