javascript - Append html table -
i need help. want append table same existing 1 condition example i've 2 rows when click na + button on first row beside na time new append table should appear in between 1st , third row. please
<script src="jquery-1.7.1.js"></script> <script language="javascript"> function clearnode(node){ var child = node.childnodes[0]; while(child != null) { node.removechild(child); child = node.childnodes[0]; } } function addrow(table){ var targetview = table; // create element var newtr = document.createelement("tr"); var newtd_c1 = document.createelement("td"); newtd_c1.setattribute("width","147"); newtd_c1.setattribute("align","center"); newtd_c1.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","time"), input_data.setattribute("size","10"), input_data.setattribute("autofocus","true") ); var newtd_c2 = document.createelement("td"); newtd_c2.setattribute("width","138"); newtd_c2.setattribute("align","center"); newtd_c2.appendchild( selection = document.createelement("select"), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 1"),option.appendchild(document.createtextnode("select 1"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 2"),option.appendchild(document.createtextnode("select 2"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 3"),option.appendchild(document.createtextnode("select 3"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 4"),option.appendchild(document.createtextnode("select 4"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 5"),option.appendchild(document.createtextnode("select 5"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 6"),option.appendchild(document.createtextnode("select 6"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 7"),option.appendchild(document.createtextnode("select 7"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 8"),option.appendchild(document.createtextnode("select 8"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 9"),option.appendchild(document.createtextnode("select 9"))) ); var newtd_c3 = document.createelement("td"); newtd_c3.setattribute("width","98"); newtd_c3.setattribute("align","center"); newtd_c3.appendchild( selection = document.createelement("select"), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 1"),option.appendchild(document.createtextnode("source 1"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 2"),option.appendchild(document.createtextnode("source 2"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 3"),option.appendchild(document.createtextnode("source 3"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 4"),option.appendchild(document.createtextnode("source 4"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 5"),option.appendchild(document.createtextnode("source 5"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 6"),option.appendchild(document.createtextnode("source 6"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 7"),option.appendchild(document.createtextnode("source 7"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 8"),option.appendchild(document.createtextnode("source 8"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 9"),option.appendchild(document.createtextnode("source 9"))) ); var newtd_c4 = document.createelement("td"); newtd_c4.setattribute("width","119"); newtd_c4.setattribute("align","center"); newtd_c4.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","text"), input_data.setattribute("size","12"), input_data.setattribute("placeholder","value") ); var newtd_c5 = document.createelement("td"); newtd_c5.setattribute("width","115"); newtd_c5.setattribute("align","center"); newtd_c5.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","button"), input_data.setattribute("value","delete"), input_data.onclick = function(){ return clearnode(newtr); } ); var newtd_c6 = document.createelement("td"); newtd_c6.setattribute("width","115"); newtd_c6.setattribute("align","center"); newtd_c6.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","button"), input_data.setattribute("value","+"), input_data.onclick = function(){ return addrow(table); } ); newtr.appendchild(newtd_c1); newtr.appendchild(newtd_c2); newtr.appendchild(newtd_c3); newtr.appendchild(newtd_c4); newtr.appendchild(newtd_c5); newtr.appendchild(newtd_c6); targetview.appendchild(newtr); } function deleterow(tableid){ try{ var table=document.getelementbyid(tableid); var rowcount=table.rows.length; for(var i=0;i<rowcount;i++){ var row=table.rows[i]; var chkbox=row.cells[0].childnodes[0]; if(null!=chkbox&&true==chkbox.checked){ if(rowcount<=1){ alert("cannot delete rows."); break; } table.deleterow(i); rowcount--;i--; } } }catch(e){ alert(e); } } function addrowclone(nextrow){ var targetview = document.getelementbyid("data"); // create element // count list var list = $(".datalisting").length; var newlist = list+1; alert(newlist); var newdiv = document.createelement("div"); newdiv.setattribute("id","list_"+newlist); newdiv.setattribute("class","datalisting"); newdiv.setattribute("style","margin:30px 0;"); var newtable = document.createelement("table"); newtable.setattribute("class","datatable"); newtable.setattribute("width","689"); newtable.setattribute("border","1"); newtable.setattribute("cellspacing","0"); newtable.setattribute("cellpadding","0"); var newtr = document.createelement("tr"); var newtd_c1 = document.createelement("td"); newtd_c1.setattribute("width","147"); newtd_c1.setattribute("align","center"); newtd_c1.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","time"), input_data.setattribute("size","10"), input_data.setattribute("autofocus","true") ); newtd_c1.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","button"), input_data.setattribute("value","+"), input_data.onclick = function(){ addrowclone("list_"+newlist); } ); var newtd_c2 = document.createelement("td"); newtd_c2.setattribute("width","138"); newtd_c2.setattribute("align","center"); newtd_c2.appendchild( selection = document.createelement("select"), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 1"),option.appendchild(document.createtextnode("select 1"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 2"),option.appendchild(document.createtextnode("select 2"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 3"),option.appendchild(document.createtextnode("select 3"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 4"),option.appendchild(document.createtextnode("select 4"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 5"),option.appendchild(document.createtextnode("select 5"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 6"),option.appendchild(document.createtextnode("select 6"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 7"),option.appendchild(document.createtextnode("select 7"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 8"),option.appendchild(document.createtextnode("select 8"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","value 9"),option.appendchild(document.createtextnode("select 9"))) ); var newtd_c3 = document.createelement("td"); newtd_c3.setattribute("width","98"); newtd_c3.setattribute("align","center"); newtd_c3.appendchild( selection = document.createelement("select"), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 1"),option.appendchild(document.createtextnode("source 1"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 2"),option.appendchild(document.createtextnode("source 2"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 3"),option.appendchild(document.createtextnode("source 3"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 4"),option.appendchild(document.createtextnode("source 4"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 5"),option.appendchild(document.createtextnode("source 5"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 6"),option.appendchild(document.createtextnode("source 6"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 7"),option.appendchild(document.createtextnode("source 7"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 8"),option.appendchild(document.createtextnode("source 8"))), selection.appendchild(option = document.createelement("option"),option.setattribute("select","source 9"),option.appendchild(document.createtextnode("source 9"))) ); var newtd_c4 = document.createelement("td"); newtd_c4.setattribute("width","119"); newtd_c4.setattribute("align","center"); newtd_c4.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","text"), input_data.setattribute("size","12"), input_data.setattribute("placeholder","value") ); var newtd_c5 = document.createelement("td"); newtd_c5.setattribute("width","115"); newtd_c5.setattribute("align","center"); newtd_c5.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","button"), input_data.setattribute("value","delete main"), input_data.onclick = function(){ return clearnode(newdiv); } ); var newtd_c6 = document.createelement("td"); newtd_c6.setattribute("width","115"); newtd_c6.setattribute("align","center"); newtd_c6.appendchild( input_data = document.createelement("input"), input_data.setattribute("type","button"), input_data.setattribute("value","+"), input_data.onclick = function(){ return addrow(newtable); } ); newtr.appendchild(newtd_c1); newtr.appendchild(newtd_c2); newtr.appendchild(newtd_c3); newtr.appendchild(newtd_c4); newtr.appendchild(newtd_c5); newtr.appendchild(newtd_c6); newtable.appendchild(newtr); newdiv.appendchild(newtable); if(nextrow != null){ var prevlist = newlist-1; $(targetview).append($(newdiv)).insertafter($(nextrow)); }else{ targetview.appendchild(newdiv); } } window.onload = function(){ addrowclone(); } </script> </head> <body> <div style="margin:10px 0;border:1px solid #000;width:629px;text-align:right;"> <div style="padding-right:15px;"> <input type="button" value="add observation" onclick="addrowclone();"/> </div> </div><div id="data"> </div> </body> </html>
i think wont somethink this.
html:
<table> <tbody> <tr> <td>first row</td> <!-- 'this' sends argument addrow function - it's button on click --> <td><button onclick="addrow(this);">add row</button></td> </tr> <tr> <td>second row</td> <td><button onclick="addrow(this);">add row</button></td> </tr> </tbody> </table> and javascript:
function addrow(button) { // table cell in clicked button lies var buttontd = button.parentnode; // table row in clicked button lies var rowtr = buttontd.parentnode; // table tbody var tabletbody = rowtr.parentnode; // table var tabletable = tabletbody.parentnode; // clone table row in clicked button lies var newtr = rowtr.clonenode(true); // cell holds name var newtrnametd = newtr.children[0]; // name, first time it's 'first row' or 'second row' var oldname = newtrnametd.innerhtml; // adding name ' new' var newname = oldname + ' new'; // append name name's cell in cloned row newtrnametd.innerhtml = newname; // try next row after in clicked button lies var nextrow = rowtr.nextsibling; // if row if (nextrow) { // append cloned row before tabletbody.insertbefore(newtr, nextrow); // if there last row } else { // append cloned row in end of table tabletbody.appendchild(newtr); } } javascript have function clonenode(true) clones node select.
if statement in code insert node after nextrow.
p.s. if using jquery use in code, or use simple javascript.
Comments
Post a Comment