Javascript 更改html表中搜索的列

使用javascript在表中创建自定义搜索。工作如期

（Sr.）是否可以始终为1、2、3等

这意味着，在下面的脚本中，如果我搜索“vin”，它将只显示名称中包含字符“vin”的行。所以在下面，只有一个。现在它将Sr编号显示为2，但因为只有1，所以应该显示1

$（文档）.ready（函数（）{
$（“#表_搜索”）。在（“键控”，函数（）上{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“表搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“table_body”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
});
});
.form控件{
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
桌子{
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th，
运输署{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2
}


Sr
名称
标志
1.
约翰
438次通过
2.
凯文
238次失败
3.
勒克斯
568人通过
4.
兄弟
538次通过
搜索时只需添加更多Sr列即可。
试试下面这个。希望能帮上忙，我的朋友：））

$（文档）.ready（函数（）{
$（“#表_搜索”）。在（“键控”，函数（）上{
var输入、过滤器、表格、tr、tdSr、tdName、i、txtSrValue、txtNameValue；
输入=document.getElementById（“表搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“table_body”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1
||txtSrValue.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
});
});

搜索时只需添加更多Sr列即可。
试试下面这个。希望能帮上忙，我的朋友：））

$（文档）.ready（函数（）{
$（“#表_搜索”）。在（“键控”，函数（）上{
var输入、过滤器、表格、tr、tdSr、tdName、i、txtSrValue、txtNameValue；
输入=document.getElementById（“表搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“table_body”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1
||txtSrValue.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
});
});

如果您确实希望显示搜索结果的索引号，请为序列号添加一个“th”元素，并在每个“tr”元素中添加一个“td”元素

然后相应地更改序列号的.innerHTML

代码片段：



.表格管制{
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
桌子{
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th，
运输署{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2
}

电视连续剧
学生证
名称
标志
1.
约翰
438次通过
2.
凯文
238次失败
3.
勒克斯
568人通过
4.
兄弟
538次通过
$（文档）.ready（函数（）{
$（“#表_搜索”）。在（“键控”，函数（）上{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“表搜索”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“table_body”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0，sr=1；i-1）{
sn=td=tr[i].getElementsByTagName（“td”）[0]；
sn.innerHTML=sr++；
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
});
$（“#表_搜索”）.keyup（）；
});
如果您确实想显示搜索结果的索引号，请为序列号添加一个“th”元素，并在每个“tr”元素中添加一个“td”元素

然后相应地更改序列号的.innerHTML

代码片段：



.表格管制{
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
桌子{
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th，
T
$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, tdSr, tdName, i, txtSrValue, txtNameValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
      tdSr = tr[i].getElementsByTagName("td")[0];   
      tdName = tr[i].getElementsByTagName("td")[1];
      if (tdSr) {
        txtSrValue = tdSr.textContent || tdSr.innerText;
        txtNameValue = tdName.textContent || tdName.innerText;
        if (txtNameValue.toUpperCase().indexOf(filter) > -1
        || txtSrValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
});