Question

我有这个表，每个列都有一个文本框（它们将用于过滤）。文本框的宽度应与相应列的宽度相同。

伪代码解释我正在尝试使用当前脚本执行的操作：

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

如您所见，文本框与宽度列不匹配。

重要：表+内容已生成，可能会不时更改，因此我必须制作动态解决方案。列数始终相同，但其宽度可能会更改

Answer 1

第一个孩子不会是第0个孩子。所以索引最初应为1。

看here。它说儿童指数从1开始。

然后宽度不需要px，只要值足够。 Check here

以下是更新后的工作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

这不需要额外的变量，您可以使用index方法本身中的each参数以及:eq() Selector之类的：{/ p>

$(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规范，但index参数符合each }方法从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 demo!

匹配表列宽的文本框

3 个答案: