view only table

[rogers]

Hello,

I hope someone can help me. On one page I have 3 text fields, and an Add button. As a user enters in the 3 text fields and clicks on the 'Add' button, I want that information to be stored in a table on the same page, and clear the 3 text fields. That way the user can enter as many records as they want, and all of them would be displayed on the table on that same page. The table is only for display, the user should not be able to update anything on the table. But they should be able to delete a row from the table.

Thank you so much for your help.

Roger

[Khalid Ali]

search these forums,this question (or variant of this) has been answered scores of times.

[Fang]

Déjà Vu

[rogers]

THanks for your reply. How do I search for this type of question on the javascript forum? I need to get this answered rather quickly. Thanks so much.

[Fang]

Select the "Search Forums" and enter the relevant the details

[rogers]

Hi Fang,

I did a search and found a post by sharapov which is titled
"Collecting data from input text boxes and displaying it in the table". This is similar to the problem I have but there are no responses to his post. Can you help me find another post that has the solution to my problem?


Thank you very much.

[rogers]

Hi Fang,

I did a search and found a post by sharapov which is titled
"Collecting data from input text boxes and displaying it in the table". This is similar to the problem I have but there are no responses to his post. Can you help me find another post that has the solution to my problem?


Thank you very much.

[halifaxrick]

I did a quick search, and found this message (it might not be the best response, but it was the first I found):


html tables (http://forums.webdeveloper.com/showthread.php?s=&threadid=8415&highlight=input+from+form+in+table)

I hope that this helps, on a related subject: Would it be worth while to have a sticky message called Frequently Answered Question, which people would put links to good answers of questions that get asked frequently?

Rick.

[Fang]

Here's something to work with:

// from Form to Table
document.getElementById(TableCell_ID).innerHTML=document.FormName.ElementName.value;
document.FormName.ElementName.value="";
// hide Table row
document.getElementById(TableRow_ID).style.display="none";

[rogers]

Hi Rick,

Yes, I agree with your suggestion to have a sticky message for questions like mine which are asked frequently.

Thanks

[rogers]

Hi Fang,

Thank you for the code. I guess I need to wrap that into a function and call it from the "onclick" of the 'add' button.

I will try it out.

Thank you very much.

[Fang]

This is a link to f.a.q. (http://68.145.35.86/dev/webapplikations/pages/support_page.html?menu_id=Support_sub)

[rogers]

Hi Fang,

In the example you gave me, how do I get the TableCell_ID,
and the TableRow_ID ?

roger

[Fang]

Hopefully you will have given it one.

[rogers]

Fang,

This is all new to me. Please forgive me for asking simple questions. How do I assign ID to columns and rows in a table? I am using the <TR> and <TD> tags.

Thanks
Roger

[Fang]

<table border="1" cellpadding="0" cellspacing="2" summary="">
<tr id="tr_id"><td id="td_id">some data</td></tr>
</table>

[rogers]

Fang,

Your suggestion worked! Thank you so much.

After I add a row to the table from the text fields, I want to be able to add another row from the text fields. The user can add as many rows as they like. Can rows be added dynamically as the user enter more data?

If not then I have to use a static table of say 10 rows.
How do I check if the first row is emtpy or not so that I know which row I should add into.

Thanks,
Roger

[Fang]

Add a table row dynamically:

function NewRow(contents) {
ObjRow = document.createElement("TR");
document.getElementById("tableId").appendChild(ObjRow);
ObjCell = document.createElement("TD");
ObjCell.innerHTML=contents;
ObjRow.appendChild(ObjCell);
}

The basic table should be defined:

<table cellspacing="0" cellpadding="0" border="0">
<tbody id="tableId">
<tr>
<td>Table contents</td>
</tr>
</table>

[rogers]

Hi Fang,

Adding the rows dynamically into the table worked just fine!

If a user wants to delete a row in the table, is it possible for the user to click on the row and have that row highlighted to indicate that is the row to be deleted? If so, what is the event I should look for? How do I obtain the index of the row when it is "highlighted" and delete the row from the table? Also how do I check if there was any row that is "highlighted", as the user may not have highlighted any row.

The user should not be able to modify the contents within the table. They can simply add a row and delete a row.

Thank you
Roger

[rogers]

Anyone know how a user can delete a row from a table?

Please see my previous post for more details.

Thanks

[Fang]

This does it basically, only the row to be removed is just hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Add Remove table row</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
var IDnumber=1;
function NewRow(contents) {
ObjRow = document.createElement("TR");
ObjRow.setAttribute('id', 'rc'+IDnumber);
document.getElementById("tableId").appendChild(ObjRow);
ObjCell = document.createElement("TD");
ObjCell.setAttribute('id', 'c'+IDnumber);
ObjCell.innerHTML=contents;
ObjRow.appendChild(ObjCell);
IDnumber++;
}

function WhichRow(e) {
var RowNumber;
if(navigator.userAgent.indexOf("MSIE")!=-1) {
if(event.srcElement.tagName=="TD") {
RowNumber=event.srcElement.id
}
}
else {
if (e.target == "[object HTMLTableCellElement]") {
RowNumber=e.target.id;
}
}
document.getElementById("r"+RowNumber).style.background="red";
if(confirm("Remove this row?")) {
document.getElementById("r"+RowNumber).style.display="none";
}
else {
document.getElementById("r"+RowNumber).style.background="white";
}
}

//-->
//]]>
</script>
<style type="text/css">
<!--
#tab1 td {cursor:pointer;}
-->
</style>
</head>
<body>
<table id="tab1" onclick="WhichRow(event);" cellspacing="0" cellpadding="0" border="1" >
<tbody id="tableId">
<tr id="rc0">
<td id="c0">Table contents</td>
</tr>
</table>
<a href="javascript:NewRow('add text');">NewRow</a>
</body>
</html>

[rogers]

Fang,

I really wanted to delete the row rather than hide it. So I would like to change the design such that one of the columns of the table is a checkbox. The user can click on the checkbox for any number of rows on the table. If the user then clicks on a delete button, all the rows which have the checkbox in a "checked" state would be deleted.

Can you help me with this?

Thank you

[rogers]

Fang,

When I add a row in the table, there should be a checkbox in the last column. The user can click the checkbox to indicate which rows should be deleted. There should be a delete button so that the rows which are "checked" will be deleted upon the user clicking on the "delete" button.

Can you please help me with this?

Thanks
Roger

[Fang]

I had to sleep on that one, IE's support for the DOM is not complete and Mozilla has a few idiosyncrasies.
The table rows are removed once, if you try a second time nothing happens (can easily be changed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Add Remove table row</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
var IDnumber=0;
function NewRow(contents) {
// the tr
ObjRow = document.createElement("TR");
ObjRow.setAttribute('id', 'rc'+IDnumber);
document.getElementById("tableId").appendChild(ObjRow);
//first td
ObjCell = document.createElement("TD");
ObjCell.setAttribute('id', 'c'+IDnumber);
ObjRow.appendChild(ObjCell);
// radio button
var ObjInput = document.createElement('input');
ObjInput.setAttribute('type', 'checkbox');
ObjInput.setAttribute('name', 'toggle'+IDnumber);
document.getElementById('c'+IDnumber).appendChild(ObjInput);
// second td
ObjCell = document.createElement("TD");
ObjCell.innerHTML=contents;
ObjRow.appendChild(ObjCell);
IDnumber++;
}

var FOUND=true;
function DeleteSelected(f) {
while(FOUND) {
Loop(f)
}
}
function Loop(f) {
for(var i=0; i<=f.length-1; i++) {
if(f.elements[i].checked==true) {
document.getElementById('tableId').removeChild(document.getElementById('tableId').childNodes[i+1]);
FOUND=true;
return;
}
}
FOUND=false;
}
//-->
//]]>
</script>
<style type="text/css">
<!--

-->
</style>
</head>
<body>
<form action="#" name="myform" onsubmit="DeleteSelected(this); return false;">
<table id="tab1" cellspacing="3" cellpadding="0" border="1" >
<tbody id="tableId">
<tr>
<td>select<br />for off</td><td id="tc">Table contents</td>
</tr>
</table>
<p>&nbsp;</p>
<button type="text" name="addinput" onclick="NewRow('add text'); return false;">New input row</button>
<button type="submit">submit</button>
</form>

</body>
</html>

[rogers]

Fang,

I am getting a type mismatch error on the following line from the code you posted to me:

document.getElementById("tableID").removeChild(document.getElementById("tableID").childNodes[i]);



Does the childNodes[i] array contain all the rows of the table?

Thanks

[rogers]

Hi Fang,


Any idea about the type mismatch error in my previous post?

Thanks
Roger

[Fang]

You would only get this error if you have changed the layout of the table.
The childNodes[] array contains all the rows within the tbody,
and anything else that may have been added.

[rogers]

Fang,

The table looks like this, it has a tbody, so is that causing the type mismatch error? I am sending my code to you below for adding and deleting rows. The delete rows does not work.
Please look at it and let me know if you find any problems.

Thanks

Here is the table with tbody:

<table cellspacing="0" cellpadding="20" border="2">
<tbody id="tableID">
</table>

Here is the function which adds rows dynamically, it works fine:

var IDnumber=1;
function addMoneyRow()
{
var numrows = document.getElementById("tableID").rows.length;
var rownum = "row" + IDnumber;

objrow = document.createElement("TR");
objrow.setAttribute("id", rownum);
document.getElementById("tableID").appendChild(objrow);

objcell = document.createElement("TD");
objcell.setAttribute("id", "acrn");
objcell.innerHTML = document.fundingform.in_acrn.value;
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "clin");
objcell.innerHTML = document.fundingform.in_clin.value;
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "amount");
objcell.innerHTML = document.fundingform.in_amount.value;
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "fundcite");
objcell.innerHTML = document.fundingform.in_fundcite.value;
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "mipr");
objcell.innerHTML = document.fundingform.in_mipr.value;
objrow.appendChild(objcell);

// cell for the checkbox
objcell = document.createElement("TD");
objcell.setAttribute("id", "c"+IDnumber);
objrow.appendChild(objcell);

// Checkbox itself
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", rownum);
document.getElementById("c"+IDnumber).appendChild(input);

document.fundingform.in_acrn.value="";
document.fundingform.in_clin.value="";
document.fundingform.in_amount.value="";
document.fundingform.in_fundcite.value="";
document.fundingform.in_mipr.value="";

/*
objcell.innerHTML = "<input type=\"checkbox\" align=\"center\">";
*/

IDnumber++;
}

Here is the part that does not work. Can you please look at it?
This is for deleting a row based on the checkbox column in the table, when the user clicks on the delete button.

var found=true;
function deleteMoneyRow(form_name)
{
while(found)
{
find_remove_rows(form_name);
}
}


function find_remove_rows(form_name)
{
for(var i=0; i<=form_name.length-1; i++)
{
/*document.write("remove:rows: i = " + i + "type = " + form_name.elements[i].type);*/

if(form_name.elements[i].type=="checkbox")
{
if(form_name.elements[i].checked==true)
{

document.getElementById("tableID").removeChild(document.getElementById("tableID").childNodes[i]);
found=true;
return;
}
}
}

found=false;
}

[rogers]

Hi Fang,

Please let me know if you found any problem from the code I sent in the previous post, or why the type mismatch error is occurring.

Thanks

[rogers]

Fang.

I tried to print out the length of the table with this statement:

document.write("len = " + document.getElementById("tableID").childNodes.length );

The table had 4 rows and it printed out correctly.


Then when I used this statement:

document.write("id = " + document.getElementById("tableID").childNodes[i+1].getAttribute("id") );

I got an error message stating that
document.getElementById("...").childNodes[...]" is null or not an object.


How can it be null or not an object if the length function worked on the childNodes array?

Thanks
Roger

[Fang]

you can't use document.write once the data stream has closed (the page has loaded). In doing so a new page is written, empty, hence no object.

The code appears to work correctly in IE, but not in Mozilla.
Is this a problem? Mozilla thinks that there is one more node.
I shall look into it.

[rogers]

Fang,

I removed the document.write statements from the find_remove_rows() function in my code. I ran the code
on IE version 6.0, and I still get the type mismatch error
on the following line (in function find_remove_rows()) in my code that I posted to you earlier today:

document.getElementById("tableID").removeChild(document.getElementById("tableID").childNodes[i] );

Can you please tell me how you got t it to work on IE ?


Thanks
Roger

[Fang]

Nothing, just nullified any reference to your form.
Works in IE 5 & 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Add Remove table row2</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
var IDnumber=1;
function addMoneyRow()
{
var numrows = document.getElementById("tableID").rows.length;
var rownum = "row" + IDnumber;

objrow = document.createElement("TR");
objrow.setAttribute("id", rownum);
document.getElementById("tableID").appendChild(objrow);

objcell = document.createElement("TD");
objcell.setAttribute("id", "acrn");
objcell.innerHTML = "acrn.value";
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "clin");
objcell.innerHTML = "clin.value";
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "amount");
objcell.innerHTML = "amount.value";
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "fundcite");
objcell.innerHTML = "fundcite.value";
objrow.appendChild(objcell);

objcell = document.createElement("TD");
objcell.setAttribute("id", "mipr");
objcell.innerHTML = "mipr.value";
objrow.appendChild(objcell);

// cell for the checkbox
objcell = document.createElement("TD");
objcell.setAttribute("id", "c"+IDnumber);
objrow.appendChild(objcell);

// Checkbox itself
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", rownum);
document.getElementById("c"+IDnumber).appendChild(input);

/*
document.fundingform.in_acrn.value="";
document.fundingform.in_clin.value="";
document.fundingform.in_amount.value="";
document.fundingform.in_fundcite.value="";
document.fundingform.in_mipr.value="";


objcell.innerHTML = "<input type=\"checkbox\" align=\"center\">";
*/

IDnumber++;
}

var found=true;
function deleteMoneyRow(form_name)
{
while(found)
{
find_remove_rows(form_name);
}
}


function find_remove_rows(form_name)
{
for(var i=0; i<=form_name.length-1; i++)
{
/*document.write("remove:rows: i = " + i + "type = " + form_name.elements[i].type);*/

if(form_name.elements[i].type=="checkbox")
{
if(form_name.elements[i].checked==true)
{
document.getElementById("tableID").removeChild(document.getElementById("tableID").childNodes[i]);
found=true;
return;
}
}
}

found=false;
}
//-->
//]]>
</script>

</head>
<body>

<form action="#" name="myform" onsubmit="deleteMoneyRow(this); return false;">
<table cellspacing="0" cellpadding="20" border="2">
<tbody id="tableID">
</table>
<p>&nbsp;</p>
<button type="text" name="addinput" onclick="addMoneyRow(); return false;">New input row</button>
<button type="submit">submit</button>
</form>

</body>
</html>

[rogers]

Fang,

I am really lost. I did not see much difference between what you have and my code.

Only difference is how we fire the delete. You are doing it from a onSubmit of the form. I am doing it from the delete button itself like the following:

<td><INPUT TYPE="button" name="addbutton" VALUE="Add" onclick="addMoneyRow()"></td>

<td><INPUT TYPE="button" name="delbutton" VALUE="Delete" onclick="deleteMoneyRow(this.form)"></td>

Note that I am passing the form name by using "this.form".

Would this way make any difference?

The other difference is that you have some header stuff which I don't have. Here is the header you have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Would that make any difference?

Is my form causing any problem?

Thanks
Roger

[Fang]

You have added more nodes to the table.
The length of the form, the number of rows and number of nodes in thead have to correspond with each other,
otherwise the node length will go out of bounds.

Use my basic table layout.

[rogers]

Fang,

Here is the basic table layout I have been using. I think it is the same as yours:

<table cellspacing="0" cellpadding="20" border="2">
<tbody id="tableID">
</table>'


This table is inside a form. That form contains:

- 5 hidden fields
- a table which contains 5 text fields and 'Add' and 'Delete'
buttons for the adding and deleting of the "basic" table's
rows.
- The "basic" table itself
- A "submit" button which sends all this data to the next
page.

You used the form's submit event to call the deleteMoneyRow function. I cannot use the form's submit event to call that function because there is more processing to be done on the next page. My form definition looks like this:

<FORM NAME="fundingform" ACTION="PROJECT_SETUP_MODS.pop" METHOD="POST">

As you can see, the action portion points to the next page which is project_setup_mods.pop.

I noticed you used a "#" for your action. I don't think I can create a second form like yours on the same page as it is probably a limitation to create 2 forms on same page.

Do you see anything wrong with my table definition or the form definition?

Let me know if you see any problem with this.

As always, thanks for your help.
Roger

[Khalid Ali]

Hollly....is this still going on...:D

[rogers]

Fang,


The delete is working! However, it works only for deleting one row. After deleting one row, I cannot delete any more rows.


Roger

[Fang]

Try this layout:

<form name="fundingform" action="PROJECT_SETUP_MODS.pop" method="post">
<table cellspacing="0" cellpadding="20" border="2">
<tbody id="tableID">
<!-- nothing here reserved for the added rows -->
</tbody>
<tfoot>
<!-- Put all extra rows here Buttons etc. -->
</tfoot>
</table>
<!-- Put hidden inputs here, no need to be in table -->
</form>

It is untested, but I need to see the final layout. Post the form and table layout.

[Fang]

Khalid said Hollly....is this still going on...
Should be finished soon ... :D

[rogers]

Fang,

Here attached is the form. It contains 3 tables. One table is for the text fields, and the "Add" and "Delete" buttons.

The second table is the table where the rows are being added dynamically and being deleted using the checkbox and delete button. It's definition looks like this:

<table cellspacing="0" cellpadding="20" border="2">
<tbody id="tableID">
</table>

The third table in the form simply contains the submit buuton for the form. It's definition looks like this:
<table cellspacing="0" cellpadding="0" border="0" align="center">
<TR>
<TD><INPUT TYPE="submit" VALUE="Continue"></TD>
</TR>
</TABLE>

As I mentioned I can delete any number of rows the first time I click the delete button. But the second time, I cannot delete any more rows.

Thanks
Roger

[Fang]

Add found=true in the function to initilize the variable each time the function is called.

var found=true;
function deleteMoneyRow(form_name)
{
found=true;
while(found)
{
find_remove_rows(form_name);
}
}

[rogers]

Hi Fang,

That worked! Thank you.
One last question. How do I go through this dynamic table and extract the value in each column, in each row of the table.

I want to create hidden fields out of each column of each row in the table so I need to traverse the table.

[Fang]

This will do it, you need to copy the values to the hidden inputs.
I imagine you will call this function just before submiting the form.

function fill_hidden_inputs() {
var RowList=document.getElementById("tableID").getElementsByTagName("TR");
for(var i=0; i<RowList.length; i++) {
// store these values as you iterate through the rows
ACRN=RowList[i].childNodes[0].innerHTML;
CLIN=RowList[i].childNodes[1].innerHTML;
AMOUNT=RowList[i].childNodes[2].innerHTML;
FUNDCITE=RowList[i].childNodes[3].innerHTML;
MIPR=RowList[i].childNodes[4].innerHTML;
}
}

[rogers]

Hi Fang,

Everything is working fine. Thank you very much for all your help. I learned a great deal of javascript from you. I appreciate your time and patience.


Thanks
Roger

[Fang]

Enjoyed it myself :)
I'll be looking into the reason it dosen't work in Mozilla.
Send you the result.

[rogers]

Fang,

Yes, please let me know if you find out why it does not work on Mozilla.

Thanks
Roger

[Fang]

Change this line:
<tbody id="tableID"></tbody>
MUST BE ON ONE LINE

In functions makehidden and makevisible:
document.all.acrnlabel.style.display is IE code use:
document.getElementById("acrnlabel").style.display