Finding the matching value in an HTML table and highlighting it

Question

I need your help.

Because of the way my data will be structured. I need to create some sort of a function that will allow a user to input the record number from column 1 into the input box "record". Then at the click of a button, the code will find the exact matching value from column 1 in my data table and select the row using the existing code to highlight it. I can't seem to be able to put together some sort of logic as to how to make this work.

<!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>

Would you consider using jQuery? It makes this quite easy: http://stackoverflow.com/questions/902597/jquery-checking-to-see-if-div-contains-text-then-action — Diodeus - James MacFarlane, Aug 07 '13 at 20:38
@programminginallston i made one: http://jsfiddle.net/8mQmH/ — stackErr, Aug 07 '13 at 20:41

twinlakes · Accepted Answer · 2013-08-08T17:27:12.207

I'm still having trouble getting the big picture of what you're trying to do, but I wrote a function to grab the tr whose first td contains the record.

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;
    }
}

From there, you can highlight it or do whatever you want.

/**
 * 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';
}

Thanks for this. Is there a way to also unhighlight the last searched row? — John Smith, Aug 08 '13 at 01:57
yeah i just updated it to unhighlight the last searched row, assuming you do not use any other CSS classes that contain the string 'highlighted' — twinlakes, Aug 08 '13 at 17:27

score 0 · Answer 2 · answered Aug 07 '13 at 22:32

0

I edited your html file you provided. Check this out. http://pastebin.com/Wz0EdBMV

answered Aug 07 '13 at 22:32

Joe Simmons

1,828
2
12
9

Finding the matching value in an HTML table and highlighting it

2 Answers2