PDA

View Full Version : Dynamic table with elements value fetching



Muthukumar
12-22-2005, 06:57 AM
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.

Muthukumar
12-22-2005, 06:58 AM
<table border="1" id="tblSample1" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Server OS</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Server Name</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>
<table border="1" id="tblSample2" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Remote Client</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Client Name</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>
<table border="1" id="tblSample3" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Storage Node</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Storage Name</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>
<table border="1" id="tblSample4" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Device Type</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Make</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>
<table border="1" id="tblSample5" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Others</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Others</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
</tr>
</table>
<br>
<table width=100%>
<tr>
<table border="1" id="tblSample6" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>New DDTS ID</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Seviority</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>
<table border="1" id="tblSample7" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Old DDTS ID</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Seviority</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
<br>

<table border="1" id="tblSample8" width=60%>
<tr>
<td width=3%>
&nbsp;
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Verified DDTS ID</b></font>
</td>
<td width=30% align="center"><font face=arial size=2 color=blue><b>Seviority</b></font>
</td>
<td width=30% align="center">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
</tr>
</table>
<br>
<table width=100%>
<tr>
<td width=20%><font face=arial size=2 color=blue><b>Test Set Name</b></font></td>
<td width=70%> <SELECT NAME="tname">
<OPTION VALUE="Test Set 1">Test Set 1
<OPTION VALUE="Test Set 2">Test Set 2
</SELECT></td>
</tr>
<tr>
<td width=20%>
<b><font face=arial size=2 color=red>Result</b></font>
</td>
<td width=70%>
<SELECT NAME="result">
<OPTION VALUE="Passed">PASS
<OPTION VALUE="Failed">FAIL
</SELECT>
</td>
</tr>

<tr>
<td width=20%>
<b><font face=arial size=2 color=blue>Comments</b></font>
</td>
<td width=70%>
<textarea name=comment cols=50 rows=5>
</textarea>
</td>
</tr>

<tr>
<td width=20% align=right>
<input type=submit name=Submit value=Submit>
</td>
<td width=70% align=left>
<input type=reset name=cancel value=Reset>
</td>
</tr>
</table>
</form>
</body>
</html>