How to add row in html table on top of specific row?

Pheshypem

New Member
I have a table, and each row has a button to add a new row on top of it. Each row has new inputs.I know how to add a row on top of the table, but not on top of each row that I'm clicking on the button. Would anyone have a tip on how to solve it? I might be able to do it, but the solution I see is very complicated, and I'm sure there must be a smarter solution.Oh, also I don't know how to uptade the parameter sent in the insertNewRow(id) function.So far this is what I have:\[code\]<script type="text/javascript"> function insertNewRow(id){ var row = document.getElementById("bottomRow"); var newrow = row.cloneNode(true); console.log(newrow); var newInputs = newrow.getElementsByTagName('input'); var allRows = row.parentNode.getElementsByTagName('tr'); row.parentNode.insertBefore(newrow, row); var i=row.rowIndex; console.log(i);}</script> <table id="myTable"> <tr> <td>Title1:</td> <td></td> <td>Title2:</td> <td></td> <td>Title3:</td> <td></td> <td></td> </tr> <tr> <td><input class="c1" readonly maxlength="9" size="7" id="gTop" type="text" value ="http://stackoverflow.com/questions/12728520/11"></td> <td> <-></td> <td id="l1"><input class="c2" style="width:35px;" maxlength="9" size="7" type="text" id="lTop" value="http://stackoverflow.com/questions/12728520/33"></td> <td>=</td> <td id="rv1"><input id="rvTop" input class="c2" style="width:105px;" maxlength="100" size="37" type="text" value="http://stackoverflow.com/questions/12728520/blahblahblah"></td> <td></td> <td>x</td> </tr> <tr id="bottomRow"> <td><input class="c1" readonly maxlength="9" size="7" id="gBottom" type="text" value =""></td> <td> </td> <td id="l1"><input class="c2" style="width:35px;" maxlength="9" size="7" type="text" id="lBottom" value="http://stackoverflow.com/questions/12728520/11"></td> <td>=</td> <td id="rv1"><input id="rvBottom" input class="c2" style="width:105px;" maxlength="100" size="37" type="text" value="http://stackoverflow.com/questions/12728520/blahblahblah"></td> <td><button type="button" onclick="insertNewRow(1)">+</button></td> <td>x</td> </tr> </table>\[/code\]
 
Back
Top