forms - JavaScript - Incrementing a value attribute -
i have problem can't head around (pretty new javascript). need know how increment variables in html document.createelement event (if that's right terminology).
i need increment 'value' attribute every time "add row" button clicked , vise versa "delete row" button.
so far have:
html
<div id='ctrl_container'> <form action='$thisuri' method='post' id='spa' name='date2'> <input type="button" value="add row" onclick="addrow('datatable')" /> <input type="button" value="delete row" onclick="deleterow('datatable')" /> <table id="datatable" border='0' cellspacing='0' cellpadding='0' > <tr> <th> select </th> <th> id </th> <th> question </th> </tr> <tbody> <tr> <td> <input type="checkbox" name="chk[]" /> </td> <td> 1<input type="hidden" name="q[]" value="1" /> </td> <td> <input type="text" name="txtbox[]" /> </td> </tr> </tbody> </table> <input type='submit' value='submit planned audit' name='send'> </form> </div>
javascript
function addrow(tableid) { var table = document.getelementbyid(tableid); var rowcount = document.getelementbyid(tableid).getelementsbytagname('tbody') [1].getelementsbytagname('tr').length; var row = table.insertrow(rowcount +1); var cell1 = row.insertcell(0); var element1 = document.createelement("input"); element1.type = "hidden"; element1.name = "q[]"; element1.value = rowcount +1; cell2.appendchild(element1); cell2.innerhtml = rowcount +1; } 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) { table.deleterow(i); rowcount--; i--; } } }catch(e) { alert(e); } }
can give me pointers?
have @ jsfiddle: http://jsfiddle.net/pdxnb/1/
it give pointers, since row being added visibly now. (the rowcount not problem here guess)
the problem , still is, adding empty cells row. have added cell2 table , can see things happening.
var cell2 = row.insertcell(1); cell2.appendchild(element1); cell2.innerhtml = rowcount +1;
also did debug is:
alert(rowcount);
you should able figure rest out yourself. if need anymore please comment below.
tip:
maybe better highest id incremented everytime adding row, , don't worry deletion. way can never have same id's
Comments
Post a Comment