Jump to content

DYNAMIC TABLE CONSTRUCTION WITH FORM ELEMENTS IN PHP


csakthikumar

Recommended Posts

I WANT TO CREATE A PHP FILE THAT IS HAVING A TABLE (ROWS WITH A TEXT BOX,CHECK BOX AND LIST BOX) WITH A BUTTON FIELD SUBMIT.........ON CLICKING IT ANOTHER ROW MUST BE CREATED WITH THE SAME FIELDS GIVEN ABOVE AND THE DATA'S GIVEN IN IT ALSO MUST BE AVAILABLE..........

 

I HAVE DONE THE SAME IN HTML USING JAVA SCRIPT.....PLEASE HELP

 

 

FOR REFERENCE I HAVE GIVEN THE CODE I USED IN HTML WITH JAVA SCRIPT

 

<head>
    <script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell----for that number
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell----for that list box
  var cellRightSel = row.insertCell(1);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('myophia', 'myophia');
  sel.options[1] = new Option('hypermetrophia', 'hypermetrophia');
  cellRightSel.appendChild(sel);
     
  // select cell----for text box
  var cellRight = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  cellRight.appendChild(el);
  
  //my code---for check box
  var cellrightdel = row.insertCell(3);
  var che = document.createElement('input');
  che.type = 'checkbox';
  che.name = 'delete' + iteration;
  che.id = 'delete' + iteration;
    cellrightdel.appendChild(che);
  	}

function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  window.alert("got loop");
for (i=2; i<=lastRow; i++) {
var chkb = document.getElementById('delete' + i);
window.alert(chkb);
if (chkb.checked)
{
tbl.deleteRow(i);
}
}
}
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  
  // submit
  frm.submit();
}
</script>
</head>
<body>
<form action="tableaddrow_nw.html" method="get">

</p>
<table border="1" id="tblSample">
  <tr>
    <th>NO</th>
<TH>DISEASE NAME </TH>
<TH>VALUE </TH>
<TH>DELETE</TH>
  </tr>
  <tr>
    <td>1</td>
    <td>
<select name="selRow0">
    <option value="myophia">myophia</option>
    <option value="hypermetrophia">hypermetrophia</option>
    </select>
</td>
    <td>
    <input type="text" name="txtRow1"
     id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" />
    </td>
<td>
<input type="checkbox" name="delete" value="delete" id="delete" />
</TD>
  </tr>
</table>
</form>
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="Submit" value="Submit" name="SUBMIT">

 

 

 

[attachment deleted by admin]

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.