javascript - 匹配表格列宽的文本框

标签 javascript jquery html-table dynamic-sizing

我有一张表格,每列都有一个文本框(它们将用于过滤)。 文本框应与相应列的宽度相同。

这是我得到的(简化版):http://jsfiddle.net/9uUpP/

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

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

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

重要:表格+内容是生成的,可能会不时发生变化,所以我不得不做一个动态的解决方案。列数将始终相同,但它们的宽度可能会发生变化

最佳答案

第一个 child 不会是第 0 个 child 。所以索引最初应该是1。

here .它说 child 索引从 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;
    });
});

关于javascript - 匹配表格列宽的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17971905/

相关文章:

javascript - 如何检索用户的 Facebook 生活事件

javascript - riot.js 嵌套标签 - 如何使用 jquery 选择内部 html 元素?

javascript - 使用 Javascript/Jquery 遍历表行

php - 无法显示 mysql wpdb 表,其中包含有关 woocommerce 产品的信息,但没有包含已删除产品的行;也无法对 html 表进行分页

javascript - jQuery 如何选择带有 rowspan 属性的 td?

javascript - 在标记上方创建一个 InfoBox 窗口, stub 位于正确的位置

javascript - 单击提交 <button> 后,访问事件处理程序中存在于 <form> 外部的 <form> 内容

javascript - 调整 JS Expand/Collapse 函数,它的流动性有点颠簸

javascript - typescript 内的 Angular 4.3(点击)语法

javascript - 在 laravel 中使用 ajax 自动完成和多功能