Add/Remove dynamic rows in HTML table

Add or remove row or item form html table dynamically.





 
<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);
     cell1.innerHTML = "Select Photo : ";


     var cell2 = row.insertCell(1);
     cell2.innerHTML = rowCount + 1;

     var cell3 = row.insertCell(2);
     var element2 = document.createElement("input");
     element2.type = "file";
     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>

 

  <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>Select File : </TD>
  <TD> 1 </TD>
  <TD> <INPUT type="file" name="file" /> </TD>
  </TR>
  </TABLE>

Create Auto Generated Table according to no of record in table

If we want to create table automatic according to no of record come from database;

first we declare how much no of col in table want to display.

<table width="810" border="0" cellspacing="0" cellpadding="0">

<?php

$colNo;

$i=0;

$slectQuery="select title from table";

$Result=mysql_query($selectQuery,$dbc)or die('error in fetch record:-'.mysql_error());

while($row=mysql_fetch_row($Result)){

if($i==0){

echo '<tr>';

}

echo '<td>

$i++;

if($i==$colNo){

echo '</tr>';

$i=0;

}

?>

</table>