Wednesday 8 November 2017

Dynamic Table Java Script


Dynamic Table Java Script

This post helps you to make dynamic table. You can do following task using this post code
  • Add a row dynamically
  • Check duplicate value
  • Delete a row 




ProductAction



HTML Code



<html>
<head>
    <title>Girfa : DynamicTable Management </title>
    <script>
 var tblrowid=0
 function AddScheduleTOTable() 
{
           
if (CheckDuplicateInTable($("#ddl option:selected").val()) == true)
 {
      tblrowid++;
      var HTML = ""
      HTML = "<tr id='row" + tblrowid + "'><td >" + $("#ddl option:selected").val() + "</td><td><a href='javascript:void(0)' onclick=DeleteTableRow('" + tblrowid + "')>Delete </a></td></tr>";
                $("#tbl").append(HTML);
  }
  else
      alert('This item type has been  added previously');
           
}
        
function CheckDuplicateInTable(text) 
{
                      
   var flag = true;
   var table = $("#tbl tbody");
   table.find('tr').each(function (i) 
   {
        var $tds = $(this).find('td');
        if ($tds.eq(0).text() == text)
                    flag = false;               
            });
        return (flag);

    }
        
function DeleteTableRow(id) 
{

            $("#row" + id).remove();
            tblrowid--;

 }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h1 style="text-align:center">Dynamic Table Management </h1><hr />
    <select id="ddl">
        <option>Sumsung</option>
        <option>LG</option>
        <option>Videocon</option>
        <option>Pansonic</option>
        <option>Onida</option>
    </select>
    <input type="button" value="Add" onclick="AddScheduleTOTable()" />
    <br /><br />
    <table  id="tbl" border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr role="row"><th>Product</th><th>Action</th>
        </thead>

        <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
    </table>
</body>
</html>


No comments:

Post a Comment