Member Avatar for brynFlew

I have some code that adds and removes rows from html tables, the problem is that it does not save the rows if the page is submitted or refreshed. I also cannot see the added attributes in the source(how can i use them)what their ids and names are, so i can use their values in a java bean and store them in a oracle database. Thanks for your help.

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);
 
            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;
 
            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);
 
        }
 
        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);
            }
        }
 
    </SCRIPT>
</HEAD>
<BODY>
 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>
 
</BODY>
</HTML>
img.JPG 47.92 KB
Edited by brynFlew because: n/a
  • 2 Contributors
  • 2 Replies
  • 104 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by brynFlew
Member Avatar for McLaren

when you want to add a row, you can first save it in database using AJAX, if save is succesfull, then add the row on the html page.

You cannot see in the source, but javascript can see it. Or you should be able to see the added rows when you use inspect element function in browser developer tool such as firebug. I use google chrome develpoer tools, click "elements" and the click magnifier icon which is for inspecting elements and then I can click on the element in page and see its html code. Hard to explain but maybe you will understand.

Member Avatar for brynFlew

when you want to add a row, you can first save it in database using AJAX, if save is succesfull, then add the row on the html page.

You cannot see in the source, but javascript can see it. Or you should be able to see the added rows when you use inspect element function in browser developer tool such as firebug. I use google chrome develpoer tools, click "elements" and the click magnifier icon which is for inspecting elements and then I can click on the element in page and see its html code. Hard to explain but maybe you will understand.

Thanks for your reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.