Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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
- function highlight_record() {
- var text = document.getElementById('record').value.trim(),
- td = document.evaluate('//table[@id="data"]/tbody/tr/td[1]/.[contains(., "' + text + '")]', document, null, 9, null).singleNodeValue,
- allTr = document.evaluate('//table[@id="data"]/tbody/tr', document, null, 6, null), i;
- // un-highlight all TRs
- for (i = 0; i < allTr.snapshotLength; i += 1) {
- allTr.snapshotItem(i).className = '';
- }
- // highlight specific TR if the input was valid
- if (td) {
- td.parentNode.className = 'highlighted';
- }
- }
- </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" />
- <input type="button" id="record-highlight" onclick="highlight_record();" value="Highlight" />
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement