Javascript 在HTML表中查找匹配值并突出显示它_Javascript

Javascript 在HTML表中查找匹配值并突出显示它

javascript

Javascript 在HTML表中查找匹配值并突出显示它,javascript,Javascript,我需要你的帮助因为我的数据的结构方式。我需要创建某种函数，允许用户将第1列中的记录编号输入到“记录”输入框中。然后单击一个按钮，代码将从我的数据表的第1列中找到精确匹配的值，并使用现有代码选择该行以突出显示它。我似乎无法将如何使这项工作起作用的逻辑结合起来 <!DOCTYPE html> <html> <head> <style type="text/css"> #data tr.normal td { color: #235A81;

我需要你的帮助

因为我的数据的结构方式。我需要创建某种函数，允许用户将第1列中的记录编号输入到“记录”输入框中。然后单击一个按钮，代码将从我的数据表的第1列中找到精确匹配的值，并使用现有代码选择该行以突出显示它。我似乎无法将如何使这项工作起作用的逻辑结合起来

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
    color: #235A81;
    background-color: white;
}
#data tr.highlighted td {
    color: #FFFFFF;
    background-color: #235A81;
}




</style>
<script type='text/javascript'>
function test() {

var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh


tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement
  var row = td.parentNode;

  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
}







document.onkeydown = function(e){
    e = e || event;
    var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    if(code === 38){ //up arraow
        newhigh = rowindex(ishigh) - 2;
        if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
        return GoTo('data', newhigh);
    } else if (code === 40){ //down arrow
        newhigh = rowindex(ishigh);
        if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
        return GoTo('data', newhigh);
    }
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
}

function rowindex(row){
    var rows = table.rows, i = rows.length;
    while(--i > -1){
        if(rows[i] === row){return i;}
    }
}


}//end of nested function

</script>


</head>
<body onload="test()">
  <table style="cursor: default;" id="data" cellspacing="1" border="1">
    <thead>
        <tr>
            <th>Record #</th>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>diff</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>9.99</td>
            <td>20.3%</td>
            <td>+3</td>
        </tr>
        <tr>
            <td>3</td>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>19.99</td>
            <td>25.1%</td>
            <td>-7</td>
        </tr>
        <tr>
            <td>1</td>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>15.89</td>
            <td>44.2%</td>
            <td>-15</td>
        </tr>
        <tr>
            <td>4</td>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>153.19</td>
            <td>44%</td>
            <td>+19</td>
        </tr>
        <tr>
            <td>2</td>
            <td>benjamin</td>
            <td>evans</td>
            <td>56</td>
            <td>153.19</td>
            <td>23%</td>
            <td>+9</td>
        </tr>
    </tbody>
</table>
<br>

Example: type the record's number in the input box and then select it:
<input type="text" id="record" />

</body>


</html>


#数据tr.normaltd{
颜色：#235A81；
背景色：白色；
}
#数据tr.td{
颜色：#FFFFFF；
背景色：#235A81；
}
功能测试（）{
var table=document.getElementById（“数据”）；
var thead=table.getElementsByTagName（“thead”）[0]；
var tbody=table.getElementsByTagName（“tbody”）[0]；
var ishigh
tbody.onclick=函数（e）{
e=e | | window.event；
var td=e.target | | e.src元素
var row=td.parentNode；
if（ishigh&&ishigh！=行）{
ishigh.className=''；
}
row.className=row.className==“突出显示”？：“突出显示”；
ishigh=行；
}
document.onkeydown=函数（e）{
e=e | |事件；
var code=e.keyCode，rowslim=table.rows.length-2，newhigh；
如果（代码===38）{//up arraow
newhigh=行索引（ishigh）-2；
如果（！ishigh | | newhigh<0）{return GoTo（'data'，rowslim）；}
返回转到（“数据”，新高）；
}如果（代码===40）{//向下箭头
newhigh=行索引（ishigh）；
如果（！ishigh | | newhigh>rowslim）{return GoTo（'data'，0）；}
返回转到（“数据”，新高）；
}
}
功能转到（id，nu）{
var obj=document.getElementById（id），
trs=obj.getElementsByTagName（'TR'）；
nu=nu+1；
if（trs[nu]）{
if（ishigh&&ishigh！=trs[nu]）{
ishigh.className=''；
}
trs[nu]。className=trs[nu]。className==“突出显示”？：“突出显示”；
ishigh=trs[nu]；
}
}
函数行索引（行）{
var rows=table.rows，i=rows.length；
而（--i>-1）{
如果（行[i]==行）{返回i；}
}
}
}//嵌套函数的结束
记录#
名字
姓
年龄
全部的
折扣
差异
5.
彼得
帕克
28
9.99
20.3%
+3
3.
厕所
罩
33
19.99
25.1%
-7
1.
克拉克
肯特
18
15.89
44.2%
-15
4.
布鲁斯
全能
45
153.19
44%
+19
2.
本杰明
埃文斯
56
153.19
23%
+9


示例：在输入框中键入记录的编号，然后选择它：

我仍然很难理解您试图做什么，但是我编写了一个函数来获取tr，它的第一个td包含记录

function findTrForRecord(record) {
    var nodelist = document.getElementById('data').getElementsByTagName('tr');
    for (var i = 0; i < nodelist.length; i++) {
        var tr = nodelist.item(i);
        var tds = tr.getElementsByTagName('td');
        if (tds.length > 0 && tds[0].innerHTML.trim() == record)
            return tr;
    }
}

函数findTrForRecord（记录）{
var nodelist=document.getElementById（'data'）.getElementsByTagName（'tr'）；
对于（变量i=0；i0&&tds[0].innerHTML.trim（）==记录）
返回tr；
}
}

从那里，你可以突出它或做任何你想做的事

/**
 * unhighlights previous row and highlights new row
 * that matches the record
 */
button.onclick = function () {
    var trs = document.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++)
        if (trs[i].className.indexOf('highlighted') > 0) {
            trs[i].className.replace('highlighted','');
            break;
        }
    var record = document.getElementById('record').value;
    var tr = findTrForRecord(record);
    tr.className += ' highlighted';
}

/**
*取消高亮显示上一行并高亮显示新行
*这与记录相符
*/
button.onclick=函数（）{
var trs=document.getElementsByTagName（'tr'）；
对于（变量i=0；i0）{
trs[i].className.replace（'突出显示'，''）；
打破
}
var record=document.getElementById（'record'）。值；
var tr=findTrForRecord（记录）；
tr.className+=“突出显示”；
}

我仍然很难理解您试图做什么，但是我编写了一个函数来获取tr，它的第一个td包含记录

function findTrForRecord(record) {
    var nodelist = document.getElementById('data').getElementsByTagName('tr');
    for (var i = 0; i < nodelist.length; i++) {
        var tr = nodelist.item(i);
        var tds = tr.getElementsByTagName('td');
        if (tds.length > 0 && tds[0].innerHTML.trim() == record)
            return tr;
    }
}

函数findTrForRecord（记录）{
var nodelist=document.getElementById（'data'）.getElementsByTagName（'tr'）；
对于（变量i=0；i0&&tds[0].innerHTML.trim（）==记录）
返回tr；
}
}

从那里，你可以突出它或做任何你想做的事

/**
 * unhighlights previous row and highlights new row
 * that matches the record
 */
button.onclick = function () {
    var trs = document.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++)
        if (trs[i].className.indexOf('highlighted') > 0) {
            trs[i].className.replace('highlighted','');
            break;
        }
    var record = document.getElementById('record').value;
    var tr = findTrForRecord(record);
    tr.className += ' highlighted';
}

/**
*取消高亮显示上一行并高亮显示新行
*这与记录相符
*/
button.onclick=函数（）{
var trs=document.getElementsByTagName（'tr'）；
对于（变量i=0；i0）{
trs[i].className.replace（'突出显示'，''）；
打破
}
var record=document.getElementById（'record'）。值；
var tr=findTrForRecord（记录）；
tr.className+=“突出显示”；
}

我编辑了您提供的html文件。看看这个

做一件事？你会考虑使用jQuery吗？这样做很容易：@programminginallston我做了一个：做一个jsfiddle？你会考虑使用jQuery吗？这让事情变得很简单：@programminginallston我做了一个：谢谢你。有没有一种方法可以取消高亮显示最后一个搜索的行？是的，我刚刚更新了它以取消高亮显示最后一个搜索的行，假设您不使用任何其他包含字符串“highlighted”的CSS类，谢谢。有没有一种方法可以取消高亮显示上次搜索的行？是的，我刚刚更新了它以取消高亮显示上次搜索的行，假设您不使用任何其他包含字符串“highlighted”的CSS类