Текстовые поля, соответствующие ширине столбца таблицы

Question

У меня есть эта таблица с текстовым полем для каждого столбца (они будут использоваться для фильтрации). Текстовые поля должны иметь ту же ширину, что и соответствующий столбец.

Это насколько я понял (упрощенная версия): http://jsfiddle.net/9uUpP/

Псевдокод, объясняющий, что я пытаюсь сделать с моим текущим скриптом:

document ready{
    var index = 0;
    for each(th){
        textboxNr(index).width = this.width;
        index++;
    }
}

Как видите, текстовые поля не соответствуют ширине столбцов.

важно: таблица + контент генерируется и может время от времени меняться, поэтому мне нужно принять динамическое решение. Количество столбцов всегда будет одинаковым, но их ширина может измениться

Answer 1

Первый ребенок не будет 0-м ребенком. Таким образом, индекс должен быть 1 изначально.

Посмотри здесь Это говорит, что детский индекс начинается с 1.

затем px не нужен по ширине, достаточно только значения. Проверьте здесь

Вот обновленный рабочий jsFiddle

Ваш код должен быть,

$(document).ready(function () {
    var index = 1;
    $("#table th").each(function () {
        $('input[type="text"]:nth-child('+index+')').css('width',$(this).width());
        index = index+1;
    });
});

Answer 2

There's no need of an extra variable for this, you can use the index параметр в each method itself, along with the :eq() Selector лайк:

$(document).ready(function () {
    $("#table th").each(function (index) {
        $('input[type="text"]:eq(' + index + ')').css('width', $(this).width());
    });
});

я использовал :eq() здесь вместо :nth-child(n) поскольку :nth-child(n) uses 1-based indexing to conform to the CSS specification but the index параметр в each method starts from 0 а также :eq() use 0-based indexing.

FIDDLE DEMO

Answer 3

Я считаю, что индексы были неверными...

$(document).ready(function () {
    $("#table th").each(function (i, v) {
        $('input[type="text"]:nth-child(' + (i+1) + ')').css('width', $(this).width() + 'px');
    });
});

демоверсия jsFiddle!