jquery - dynamically add row in Javascript not working in IE -
dynamically adding new rows using javascript. works fine in firefox in ie doesn't work properly.
issue : when adding new row ,values fetching previous row. hide cell doesn't work (newcell.style.display = "none"
)
getting undefined in ie (newcell.childnodes[1].type
)
my code:
html
<table id="coins" class="coins" name="coins"> <tr id="0"> <th> <label>bills/coins</label> </th> <th> <label>qty</label> </th> <th> <label>line amount</label> </th> </tr> <tr id="1"> <td> <cws:productcashlist onchange="productprice(this)"/> </td> <td> <input name="qty" type="text" id="qty_1" size="10" maxlength="60" value="1" onblur="lineamt(this.id);" /> </td> <td> <input name="lineamount" type="text" id="lineamount_1" size="10" maxlength="60" value="0" /> </td> <td> <input class="bluebutton" type="button" id="addrow" value="add" onclick="add('coins');"/> </td> <td style="display:none"> <input class="bluebutton" name="deleterow" type="button" id="deleterow_1" value="delete" onclick="adelete(this.id);" /> </td> <td style="display:none"> <input name="price" type="text" id="price_1" size="10" maxlength="60" value="1"/> </td> </tr> </tbody> </table>
javascript
function add(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; var row = table.insertrow(rowcount); row.id = rowcount; var colcount = table.rows[rowcount-1].cells.length; for(var i=0; i<colcount; i++) { var newcell = row.insertcell(i); newcell.innerhtml = table.rows[1].cells[i].innerhtml; if(i==4) newcell.style.display = "none"; switch(newcell.childnodes[1].type) { case "text": newcell.childnodes[1].id = newcell.childnodes[1].name+"_"+rowcount; if(newcell.childnodes[1].name == "qty") newcell.childnodes[1].value = "1"; if(newcell.childnodes[1].name == "price") newcell.style.display = "none"; else newcell.childnodes[1].value = "0"; break; case "button": if(newcell.childnodes[1].value == "delete") newcell.childnodes[1].id = newcell.childnodes[1].name+"_"+rowcount; break; case "select-one": newcell.childnodes[1].id = "id_"+newcell.childnodes[1].name+"_"+rowcount; newcell.childnodes[1].selectedindex = 0; break; } } if(rowcount>1) { var prerow = table.rows[rowcount-1]; var childcell = prerow.cells[3]; childcell.style.display = "none"; var childcell = prerow.cells[4]; childcell.style.display = "block"; } }
please me resolve this.
it looks you're missing opening <tbody>
tag. browsers smart , handle fine, others freak out. try adding opening <tbody>
, see if still doesn't work in ie.
edit: index childnodes [1]. shouldn't [0]? here's jsfiddle indexes changed: https://jsfiddle.net/nlrru7xw/
edit 2: instead of iterating on of columns , of child nodes , using if
statement, may better use little more targeted such queryselector
. example:
row.queryselector('input[name="qty"]').value = '1'; row.queryselector('input[name="price"]').display = 'none'; var allinputs = row.queryselectorall('input'); for(var = 0; < allinputs.length; ++i) { allinputs[i].id = allinputs[i].name + '_' + rowcount; }
this snippet doesn't set same things code tries set, think it's starting point you.
Comments
Post a Comment