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.

Reply

Subscribe

Popular Salesforce Blogs

Popular Salesforce Videos

Report

Harassment or bullying behavior
Harassment or bullying behavior
Contains mature or sensitive content
Contains misleading or false information
Mobile App Reported Contents
Contains abusive or derogatory content
Contains spam, fake content or potential malware

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts
  • Invite this member to groups
  • Message this member
  • Add this member as a connection

Please note: This action will also remove this member from your connections and send a report to the site admin. Please allow a few minutes for this process to complete.

Report

You have already reported this .