[RESOLVED] how 2 make user able to put their information in a table when the page's in a browser

**twinkie** · Mar 15th, 2007, 04:30 AM

i want to create a table where when the page is in a browser, the user can store information in the table. however the code that i am using right now does not allow the user to store information in the table. what should i do so that the user able to put their info in the table??

this are the codes that i am currently using:
<table width="739" border="1">
<tr>
<th class="style1" scope="col">Name of People</th>
<th class="style1" scope="col">Hobbies</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="28"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

**DeadEyes** · Mar 15th, 2007, 06:05 AM

Do you want the user to add information to the table after the page has loaded? If so with javascript you could do something like this:

Code:

//dynamically create a table to display the object properties.
//win: handle to the window that will contain the table.
//arr: array of objectProperties. 
function createObjectPropertiesTable(win,arr){
    var doc = win.document;
    var div = doc.createElement("DIV");
    var tbl = doc.createElement("TABLE");
    tbl.border = "1";
    var tbody = doc.createElement("TBODY");
    for(i=0;i<arr.length;i++){
        var tr = doc.createElement("TR");
        var td = doc.createElement("TD");
        var txt = doc.createTextNode(arr[i].id);
        td.appendChild(txt);
        tr.appendChild(td);
        
        td = doc.createElement("TD");
        txt = doc.createTextNode(" " + arr[i].data);
        td.appendChild(txt);
        tr.appendChild(td);
        
        tbody.appendChild(tr);
    }
    tbl.appendChild(tbody);
    div.appendChild(tbl);
    doc.body.appendChild(div);
}

The alternative is to submit the data back to the server process it and then display it again.

**twinkie** · Mar 15th, 2007, 11:04 PM

that means i have to delete my codes?
i dun understand the codes that u gives me.

**DeadEyes** · Mar 16th, 2007, 04:24 AM

ok maybe giving you that code in isolation wasn't the best idea. below is what I think your trying to achieve. You can look at it and use the ideas in it to implement your own solution.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  function addline(){
    var t1 = document.frm.txt1.value;
    var t2 = document.frm.txt2.value;
    var tbody = document.getElementsByTagName("tbody");
    var tr = document.createElement("TR");
    var td = document.createElement("TD");
    var txt = document.createTextNode(t1);
    td.appendChild(txt);
    tr.appendChild(td);
    
    td = document.createElement("TD");
    txt = document.createTextNode(t2);
    td.appendChild(txt);
    tr.appendChild(td);
    tbody[0].appendChild(tr);
  }
</script>
  </head>
  <body>
    <form id="frm" name="frm">
      <input id="txt1" name=txt1 type="text">
      <input id="txt2" name=txt2 type="text">
      <button onclick="addline()">Add</button>
      <table id="tbl" name="tbl" style="border:solid black 1pt">
        <thead>
          <tr>
            <td>Name</td>
            <td>Hobbies</td>
          </tr>
        </thead>
        <tbody style="border:solid black 1pt">
        </tbody>
      </table>
    </form>
  </body>
</html>

**JPnyc** · Mar 16th, 2007, 10:22 AM

Keep in mind that the info they add will be gone again as soon as the page is refreshed.

**rnd me** · Mar 22nd, 2007, 04:55 AM

here is a way to keep user data through a text box, you could probably work it into something: you can feed it a string instead of a textarea.

its for IE only, and it gives you 64KB, whach is actually quite a bit. Firefox 2 has a simmiler feature, but i havent played with it yet.

this one is really easy.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Notes</title>
<style>
	 .userData {behavior:url(#default#userdata);}
	 
body	{ background-color: #000; margin: 0px; overflow:hidden; color:#ffffff;  }
u	{ font-family:Verdana, Arial, Helvetica, sans-serif; cursor:pointer; border: 2px solid #bbb; background-color:#999999; padding: 5px; }
	 
</style>


<SCRIPT>
   function fnSave(){
      oPersistDiv.setAttribute("Notes",oPersistText.value);
      oPersistDiv.save("oXMLStore");
   }
   function fnLoad(){
      oPersistDiv.load("oXMLStore");
      oPersistText.value=oPersistDiv.getAttribute("Notes");
   }
</SCRIPT>


</head>

<body onunload="fnSave()" onload="fnLoad()" >


<DIV CLASS="userData" ID="oPersistDiv">
		<textarea cols="110" rows="60" id="oPersistText" style="background-color: transparent; color:#FFFFFF; font-family: tahoma; font-size:14pt;" > </textarea>
</DIV>


</body>
</html>

**twinkie** · Mar 22nd, 2007, 10:13 PM

ermmm...i have tried using your code....thats the effect i want to achieve as in user are able to write something when the page is in the browser...the problem is that: i want the user to be able to write something on the table...

i have tried to combine my table code with ur code , but it still does not work;the user still unable to write on the table when the page is in a browser...

**penagate** · Mar 23rd, 2007, 03:48 AM

What exactly do you mean by "write" on the table? Do you mean click and type? If so, you can't do that with a table alone. You'll need to put Input elements in each cell.

**DeadEyes** · Mar 23rd, 2007, 04:30 AM

An editable grid, interesting but i think it may not be worth the effort. I can see it being the type of thing that you could get 95% working, only to come across some problem that can't be fixed which makes everything useless.
A similar approach to the one adopted in early days of VB would be a start.
Namely clicking a cell displays an textbox over that cell which you edit and tabbing off transfers the data to the cell.

**twinkie** · Mar 23rd, 2007, 04:32 AM

yes. that is what i want to achieve, where user able to click and type on the table.

what do you mean by put input elements in each cell? can you give me example of how to code the input elements?can you give me example of the code?

**penagate** · Mar 23rd, 2007, 05:08 AM

You would need to place the table within a form.

Input element.

As for code, try it, and we'll help if you get stuck.

**twinkie** · Mar 25th, 2007, 10:26 PM

hello guys! it works!!! IT WORKS!!! thanks u so much!!!

Thread: [RESOLVED] how 2 make user able to put their information in a table when the page's in a browser

Thread Tools

Display

[RESOLVED] how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a bro

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Re: how 2 make user able to put their information in a table when the page's in a browser

Posting Permissions