PDA

Click to See Complete Forum and Search --> : Adding a new row in a HTML table with a button

Rilt
09-02-2003, 09:18 AM
I have a table consisting of 4 columns.
Column1 containing a text variable while columns 2-4 are input text.

Beside the table I have a select field and a button.

I would like that when the user selects a value (in the select field) and then clicks on the button, a new row would be added to the above stated table. In this new Row, the first column should contain the selected value and the remaining 3 columns the input text.

Is this possible with PHP? How? Please Help... need it very badly.
Khalid Ali
09-02-2003, 09:35 AM
yes it is possible using 2 options at least
1.php [submit the form to php and create the html and send it back to the client browser]

2. [use client side scripting e.g javascript and add the new elements dynamically]

Use of javascript will be efficient,however it will have accessibility issues(since there is a possibility of a browser not supporting it)
Rilt
09-02-2003, 09:40 AM
Ok, I dont know much about Javascript - but if its more efficient, Im willling to try it. My question now is: how is it done?
Rilt
09-02-2003, 10:47 AM
Here's the code of what I'm trying to do:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript">
<!-- Begin
/* Each tbox is going to need a unique id ... */
counter = 1

function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
row.setAttribute("id","tr"+counter); // set ID of the row

var td1 = document.createElement("TD");
//td1.appendChild(document.createTextNode("txt"));
var oNewNode = document.createElement("SPAN");
td1.appendChild(oNewNode);
//oNewNode.innerText=oSel.value;


var td2 = document.createElement("TD");
var input2 = document.createElement("INPUT")
input2.setAttribute("type","text");
input2.setAttribute("name","tbox"+counter);
input2.setAttribute("value","Text box"+counter);
input2.setAttribute("id","tbox"+counter);
input2.setAttribute("size",10);
td2.appendChild(input2);

// counter++;

var td3 = document.createElement("TD");
var input3 = document.createElement("INPUT");
input3.setAttribute("type","text");
input3.setAttribute("name","tbox"+counter);
input3.setAttribute("value","Text box "+counter);
input3.setAttribute("id","tbox"+counter);
input3.setAttribute("size",2);
td3.appendChild(input3);

var td4 = document.createElement("TD");
var input4 = document.createElement("INPUT");
input4.setAttribute("type","text");
input4.setAttribute("name","tbox"+counter);
input4.setAttribute("value","Text box "+counter);
input4.setAttribute("id","tbox"+counter);
input4.setAttribute("size",10);
td4.appendChild(input4);

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);

counter++;
}
function delRows() {
var num_rows = counter;
var rows_to_delete = new Array();
for(var i = 0; i < num_rows; i++) {
if(document.getElementById("check"+i) && document.getElementById("check"+i).checked) {
document.getElementById("myTable").deleteRow(document.getElementById("tr" + i).rowIndex);
}
}
}
// End -->

function fnCreate(){
oData.innerHTML="";
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text.length>0){
var aElement=document.createElement(oOption.text);
eval("aElement." + oOption.value + "='" + oText.value + "'");
if(oOption.text=="A"){
aElement.href="javascript:alert('A link.')";
}
}
oData.appendChild(aElement);
}
</SCRIPT>
</HEAD>
<BODY>


<FORM action="test.page" method="post" name="form1">
<P>Select Typ
<SELECT ID="oSel">
<OPTION>
<OPTION VALUE="innerText">A
<OPTION VALUE="value">&lt;INPUT TYPE="text"&gt;
<OPTION VALUE="value">&lt;INPUT TYPE="button"&gt;
<OPTION VALUE="innerText">MARQUEE
</SELECT>

<INPUT name="B3" onclick='addRow("myTable")' type="button" value="Add Row">
<INPUT name="B4" type="submit" value="Submit">
</P>

<HR>
<BR>
<TABLE border="1" cellSpacing="0" id="myTable">
<TBODY>
<TR><TD> column1</TD> <TD> column2</TD><TD> column3</TD><TD> column4</TD></TR>
</TBODY>
</TABLE>
<!-- <INPUT NAME="delRow" TYPE="button" VALUE="Delete Checked Rows" onClick="delRows()"> -->

</FORM>

</BODY>
</HTML>

What is wrong? Why wont it function properly?