Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › Can we create a dynamic html table on visualforce page?

Tagged: , ,

  • Abhinav

    Member
    June 2, 2016 at 8:53 AM

    Hi Ajit,

    Yes you can create that. Below this the small snippet.

     

    <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";
    element1.name="chkbox[]";
    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";
    element2.name = "txtbox[]";
    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>

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos