javascript - Cannot extract data from TD if there is span in front -
i need help.
because of way ie7 chooses ignore td: whitespace: nowrap, forced put , use spans in front of td's here's delema. when click on table row has no spans in between td's, coding able extract data , highlight row.
however, when introduce span in between td's , click select single cell in table row spans's following error: "cells.0 null or not object." know if click little bit off side of table cell works, need able click on <td> , <span> areas , have code work.
since making table have <span></span>'s in between <td>'s how can existing coding reformatted accomodate difference <td>data</td> <td><span>data</span></td>?
no jquery please.
<!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; getdata(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]; } getdata(trs[nu]); } function rowindex(row){ var rows = table.rows, = rows.length; while(--i > -1){ if(rows[i] === row){return i;} } } function getdata(row) { document.getelementbyid('firstname').value = row.cells[0].innerhtml; document.getelementbyid('lastname').value = row.cells[1].innerhtml; document.getelementbyid('age').value = row.cells[2].innerhtml; document.getelementbyid('total').value = row.cells[3].innerhtml; document.getelementbyid('discount').value = row.cells[4].innerhtml; document.getelementbyid('diff').value = row.cells[5].innerhtml; find_option('fname',row.cells[0].innerhtml) } }//end of nested function function find_option(id,value) { var sel = document.getelementbyid(id) (var = 0; < sel.length; i++){ //alert(sel.options[i].text+" "+sel.options[i].value) if (sel.options[i].value == value) { sel.selectedindex = i; return } } } </script> </head> <body> <table id="data" cellspacing="1" border="1"> <thead> <tr> <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><span>peter</span></td> <td><span>parker</span></td> <td><span>28</span></td> <td><span>9.99</span></td> <td><span>20.3%</span></td> <td><span>+3</span></td> </tr> <tr> <td>john</td> <td>hood</td> <td>33</td> <td>19.99</td> <td>25.1%</td> <td>-7</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td>15.89</td> <td>44.2%</td> <td>-15</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td>153.19</td> <td>44%</td> <td>+19</td> </tr> <tr> <td>benjamin</td> <td>evans</td> <td>56</td> <td>153.19</td> <td>23%</td> <td>+9</td> </tr> </tbody> </table> <br> firstname is: <input type="text" id="firstname" /> <br>lastname is: <input type="text" id="lastname" /> <br>age is: <input type="text" id="age" /> <br>total is: <input type="text" id="total" /> <br>discount is: <input type="text" id="discount" /> <br>diff is: <input type="text" id="diff" /> <br> <input type="button" value="testme" onclick="test()"> <br><br> <select id="fname"> <option value="bruce">bruce</option> <option value="clark">clark</option> <option value="benjamin">benjamin</option> </select> </body> </html>
change line:
var row = td.parentnode; to:
var row = (td.tagname == "div") ? td.parentnode.parentnode : td.parentnode; 
Comments
Post a Comment