匹配表列寬的文本框

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

這不需要額外的變量，你可以在each方法本身使用index參數，以及: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)使用基於1的索引來符合CSS規范，但each方法中的index參數從0開始:eq()使用基於0的索引。

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演示！