Установите ширину тд в зависимости от количества тд с помощью jquery - PullRequest
Новая
       5

Установите ширину тд в зависимости от количества тд с помощью jquery

2 голосов
/ 14 октября 2010

У меня есть несколько веб-страниц с разным количеством таблиц с разным количеством столбцов.

Я искал в сети спине jquery, который получает количество столбцов таблицы и в зависимости от количества столбцов определяет ширину каждого столбца.

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>

1 Ответ

7 голосов
/ 14 октября 2010

Чтобы получить количество столбцов: 

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

Чтобы указать ширину: 

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

Надеюсь, это было то, что вы искали

Edit:

Чтобы указать ширину для определенного столбца:

// если вы указали идентификатор для каждого 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;

«таблица» выберет все таблицы на странице; используйте идентификатор или класс, чтобы определить, какая таблица вам нужна.

Редактировать 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
    }
});

Надеюсь, это лучший ответ:)

...