Dynamic table with elements value fetching
Dear all,
Good Morning.
I am trying to achive a tool which generates a dynamic rows + columns with table. I have to fetch the data and put it into mysql db. This is my script. Help me to get tblSample111 column data after inputting some other.
<--- code --->
<html>
<head><title>Test Summary Report Creater</title>
</head>
<script language=javascript>
var INPUT_NAME_PREFIX = 'inputName';
var headerRows;
var TABLE_NAME = new Array (8);
var i=0;
window.onload=fillInRows;
function fillInRows()
{
TABLE_NAME[0] = 'tblSample1';
TABLE_NAME[1] = 'tblSample2';
TABLE_NAME[2] = 'tblSample3';
TABLE_NAME[3] = 'tblSample4';
TABLE_NAME[4] = 'tblSample5';
TABLE_NAME[5] = 'tblSample6';
TABLE_NAME[6] = 'tblSample7';
TABLE_NAME[7] = 'tblSample8';
for ( i=0;i<8;i++)
{
headerRows = document.getElementById(TABLE_NAME[i]).rows.length;
addRowToTable(TABLE_NAME[i]);
}
}
// CONFIG:
// myRowObject is an object for storing information about the table rows
function myRowObject(one, two, three, four, five)
{
this.one = one; // text object
this.two = two; // input text object
this.three = three; // input checkbox object
this.four = four;
this.five = five;
}
function addRowToTable(table)
{
var tbl = document.getElementById(table);
var nextRow = tbl.rows.length;
var iteration = nextRow - parseInt(headerRows) + parseInt(1);
// add the row
var row = tbl.insertRow(nextRow);
// CONFIG: This whole section can be configured
// cell 0 - text
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
// txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('name', table + 1 + iteration);
txtInp.setAttribute('size', '40');
txtInp.setAttribute('value', table + 1 + iteration); // iteration included for debug purposes
cell1.appendChild(txtInp);
// Try
window.caller = document.getElementById(table + 1 + iteration);
// cell 2 - input button
var cell2 = row.insertCell(2);
var boxInp = document.createElement('input');
boxInp.setAttribute('type', 'text');
//boxInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('name', table + 2 + iteration);
boxInp.setAttribute('size', '40');
boxInp.setAttribute('value', table + 2 + iteration); // iteration included for debug purposes
cell2.appendChild(boxInp);
// cell 3 - input button
var cell4 = row.insertCell(3);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Add');
btnEl.onclick = function () {addRowToTable(table)};
cell4.appendChild(btnEl);
// cell 4 - input button
var cell4 = row.insertCell(4);
var butnEl = document.createElement('input');
butnEl.setAttribute('type', 'button');
butnEl.setAttribute('value', 'Delete');
butnEl.onclick = function () {deleteCurrentRow(this)};
cell4.appendChild(butnEl);
// Pass in the elements you want to reference later
// Store the myRow object in each row
row.myRow = new myRowObject(textNode, txtInp, boxInp, btnEl, butnEl);
}
// If there isn't an element with an onclick event in your row, then this function can't be used.
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode;
var rIndex = delRow.rowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
function reorderRows(tbl, startingIndex)
{
if (tbl.rows[startingIndex]) {
var count = startingIndex;
for (var i=startingIndex; i<tbl.rows.length; i++) {
// CONFIG: next line is affected by myRowObject settings
tbl.rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text
// CONFIG: next line is affected by myRowObject settings
var tempVal = tbl.rows[i].myRow.two.value.split(' '); // for debug purposes
// tbl.rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes
count++;
}
}
}
function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray[i].rowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRow2NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRow2NewWindow';
// submit
frm.submit();
}
function validate()
{
alert("Completed");
}
</script>
<?
$link = mysql_connect('localhost', '', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
#echo 'Connected successfully';
mysql_select_db('tsr',$link) or die( "Unable to select database");
?>
<body>
<form name=create method=post onSubmit=javascript:validate();>
<table width=100%>
<tr>
<td bgcolor=rgb(0,117,58); width=75%>
<b><font face=arial size=4 color=white>Test Summary Report Creater</font></b>
</td>
<td width=25% align=right>
<b><font face=arial size=2 color=red><a href=create.php>HOME</a></font></b>
</td>
</tr>
</table>
<br>
<table width=100%>
<tr>
<td width=20%>
<b><font face=arial size=2 color=blue>Tester Name</b></font><br>
</td>
<td width=70%>
<?
$query="SELECT * FROM tester";
$result=mysql_query($query);
$num=mysql_numrows($result);
echo '<SELECT NAME="tester">';
$i=0;
while ($i < $num) {
$name=mysql_result($result,$i,"name");
echo '<OPTION VALUE="' . $name . '">' . $name;
$i++;
}
echo "</SELECT>";
?>
</td>
</tr>
<tr>
<td width=20%>
<b><font face=arial size=2 color=blue>Project Name</b></font><br>
</td>
<td width=70%>
<?
$query="SELECT * FROM project";
$result=mysql_query($query);
$num=mysql_numrows($result);
echo '<SELECT NAME="project">';
$i=0;
while ($i < $num) {
$project=mysql_result($result,$i,"project");
echo '<OPTION VALUE="' . $project . '">' . $project;
$i++;
}
echo "</SELECT>";
?>
</td>
</tr>
<tr>
<td width=20%>
<b><font face=arial size=2 color=blue>Build Name</b></font><br>
</td>
<td width=70%>
<input type=text name=build value="" size=30>
</td>
</tr>
<tr>
<td width=20%>
<b><font face=arial size=2 color=blue>Testing Type</b></font><br>
</td>
<td width=70%>
<?
$query="SELECT * FROM testtype";
$result=mysql_query($query);
$num=mysql_numrows($result);
echo '<SELECT NAME="ttype">';
$i=0;
while ($i < $num) {
$testtype=mysql_result($result,$i,"testtype");
echo '<OPTION VALUE="' . $testtype . '">' . $testtype;
$i++;
}
echo "</SELECT>";
?>
</td>
</tr>
</table>
<br>
<table width=100%>
<tr>
continued in next reply....
<-------------- end code ----------------->
Thanks for your analysis.
CSS Codes
Reply With Quote
Bookmarks