Announcement Announcement Module
Collapse
No announcement yet.
binding row of a table created dynamically Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • binding row of a table created dynamically

    Hi,
    I have a form that contains a button and a table.
    Whenever I click this button a new row is added to the table.
    How could I make the binding of the table rows?
    Here is how the jsp page looks like:
    I want to bind the rows of the table name itemTable.
    Code:
    <%@ include file="/taglibs.jsp"%>
    <SCRIPT LANGUAGE="JavaScript">
    i=0;
    
    function addRow&#40;id&#41;&#123;
    	var itemcode = document.createElement&#40;"INPUT"&#41; ;
    	itemcode.type = "text" ;
    	itemcode.name = "itemLine&#91;"+ i +"&#93;.item.code" ;
    	itemcode.value = "itemLine&#91;"+ i +"&#93;.item.code" ;
    
    	var quantity = document.createElement&#40;"INPUT"&#41; ;
    	quantity.type = "text" ;
    	quantity.name = "itemLine&#91;"+ i +"&#93;.quantity" ;
    	quantity.value = "itemLine&#91;"+ i +"&#93;.quantity" ;
    
    	var itemid = document.createElement&#40;"INPUT"&#41; ;
    	itemid.type = "hidden" ;
    	itemid.name = "itemLine&#91;"+ i +"&#93;.item.id" ;
    	itemid.value = "itemLine&#91;"+ i +"&#93;.quantity" ;
    
    	var delbutton = document.createElement&#40;"INPUT"&#41; ;
    	delbutton.type = "button" ;
    	delbutton.name = "itemLine_"+ i +"_delete" ;
    	delbutton.id = "itemLine_"+ i +"_delete" ;
    	delbutton.value = "Delete";
    	
    
    
    	var tbody = document.getElementById&#40;id&#41;.getElementsByTagName&#40;"TBODY" &#41;&#91;0&#93;;
    	var row = document.createElement&#40;"TR" &#41;;
    	row.id = "itemLine_"+i;
    
        var td1 = document.createElement&#40;"TD" &#41;;
        td1.appendChild&#40;itemcode&#41;;
        var td2 = document.createElement&#40;"TD" &#41;;
        td2.appendChild &#40;quantity&#41;;
    	var td3 = document.createElement&#40;"TD" &#41;;
        td3.appendChild &#40;delbutton&#41;;
    
    	
        row.appendChild&#40;td1&#41;;
        row.appendChild&#40;td2&#41;;
        row.appendChild&#40;td3&#41;;
    	row.appendChild&#40;itemid&#41;;
        tbody.appendChild&#40;row&#41;;
    
    	
        document.getElementById&#40;"itemLine_"+ i +"_delete"&#41;.addEventListener&#40;"click",deleteItemLine,false&#41;;
    	
    	
    
    	
    	i++;
    &#125;
    
    function deleteItemLine&#40;evt&#41; &#123;
    	btn = &#40;evt.target&#41;?evt.target&#58;&#40;evt.srcElement&#41;?evt.srcElement&#58;false;
    	row = btn.parentNode.parentNode;
    	document.getElementById&#40;'itemTable'&#41;.deleteRow&#40;row.rowIndex&#41;;
    	
    &#125;
    
    </SCRIPT>
    <html>
    <title>Add Invoice</title>
    <table id="itemTable" cellspacing="0" border="1">
    	<tbody>
            <tr>
              <td>ItemCode</td>
              <td>Quantity</td>
    		  <td></td>
            </tr>
        </tbody>  
    </table>
    
    
    <p><input type="button" name="addItem" value="Add Item" onclick="javascript&#58;addRow&#40;'itemTable'&#41;;"/><input type="submit" name="submit" value="Submit"/>
    </form>
    </html>
    How could this be done?
    Thanks in Advance.
Working...
X