Forum:

HTML Pages with CSS and JavaScript

build a data entry sheet like spread-sheet

Ranch Hand

Posts: 334

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm building aa application with a thin client. I need to enter data of three columns each row. Currently I am using list-box for collecting all rows, test box for entering each row, with a update button, delete button, and add row button.
However, I like to use a spread-sheet like grid with an edit button beside the row to add values. When the submit button is pushed all data rows should be collected by a servlet in the server side.
How to do this with html/javaScript, etc.
Please help
Thanks in advance
Ruilin

[This message has been edited by ruilin yang (edited November 19, 2001).]
[This message has been edited by ruilin yang (edited November 27, 2001).]

ruilin yang

Ranch Hand

Posts: 334

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Please help on this topic.
I like to use a spread-sheet like format to input data set values. Each set (row) includes 3 values, e.g. weigth, height, volume.
How to add a record, modify a record, delete a record ?
After all input finish and submit, how to make servlet to retrieve these values ?
Please help
Ruilin

Chris Treglio

Ranch Hand

Posts: 64

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you got any code you can post? Or better, a link to the page you've created? I'm not entirely clear on what you're trying to do.
I've just finished putting together a similar (sort of) editable table that allows the user to double click a table cell, which turns the contents into form-like elements (select objects, text boxes, whatever's appropriate). When the user is done, they can click away from the fields and it turns it back into table contents. This stuff isn't too hard if you're willing to work with DOM (which is only good with the more recent batches of browsers).

ruilin yang

Ranch Hand

Posts: 334

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Chris,
Thanks for your response.
I have a code doing the same job by using 3 text fields for input and 3 comBolist for viewing and collecting rows. I want to improve it into a spread-sheet like input sheet.

<html> <head> <title>Untitled Document</title>
<TITLE>Select Option</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<p align="center">�</p>
<p align="center"><font size="+2"><img src="logo.gif" width="56" height="67"></font></p>
<p align="center"><font size="+2" color="#0000FF">Package
- Data Input</font></p>

<FORM NAME="aForm" WIDTH="100%" action="mixed.jsp" method="post" onSubmit="selectAll(aForm.ppv,aForm.distance,aForm.weight,aForm.numDataPoints)" >
<div align="center"><BR>
<table width="53%" border="0" height="462">
<tr>
<td width="28%" height="165">
<div align="center">
<p><font color="#0000FF">PPV(m/s)</font></p>
<p><font color="#0000FF">
<select name="ppv" size=7 multiple
onChange="setTextToSelItem(aForm.ppvField,aForm.ppv,aForm.distanceField,aForm.distance,aForm.weightField,aForm.weight);
selectAllTogether (aForm.ppv,aForm.distance,aForm.weight)"
>
<OPTION SELECTED>1. </OPTION>
</select>
</font></p>
</div>
</td>
<td width="38%" height="165">
<div align="center">
<p><font color="#0000FF">Distance (ft)</font></p>
<p><font color="#0000FF">
<select name="distance" size=7 multiple
onChange="setTextToSelItem(aForm.ppvField, aForm.ppv,aForm.distanceField,aForm.distance,aForm.weightField,aForm.weight);
selectAllTogether (aForm.distance,aForm.ppv,aForm.weight)"
>
<OPTION SELECTED>1. </OPTION>
</select>
</font></p>
</div>
</td>
<td width="34%" height="165">
<div align="center">
<p><font color="#0000FF">Weight (lb)</font></p>
<p><font color="#0000FF">
<select name="weight" size=7 multiple
onChange="setTextToSelItem(aForm.ppvField, aForm.ppv,aForm.distanceField,aForm.distance,aForm.weightField,aForm.weight);
selectAllTogether (aForm.weight,aForm.distance,aForm.ppv)"
>
<OPTION SELECTED>1. </OPTION>
</select>
</font></p>
</div>
</td>
</tr>
<tr>
<td width="28%" height="22">
<div align="center"></div>
</td>
<td width="38%" height="22">
<div align="center">
<p><font color="#0000FF"><b>Input</b></font></p>
</div>
</td>
<td width="34%" height="22">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="28%" height="29">
<div align="center"> <font color="#0000FF">
<input type="Text" name="ppvField" size=12

>
</font></div>
</td>
<td width="38%" height="29">
<div align="center"> <font color="#0000FF">
<input type="Text" name="distanceField" size=12

>
</font></div>
</td>
<td width="34%" height="29">
<div align="center"> <font color="#0000FF">
<input type="Text" name="weightField" size=12

>
</font></div>
</td>
</tr>
<tr>
<td width="28%" height="40">
<div align="center"> <font color="#0000FF"> </font></div>
</td>
<td width="38%" height="40">
<div align="center"> <font color="#0000FF">
<input type="button" name="updateBtn2"
value="Update Selected Item"
onClick="updateListItem(aForm.ppv,aForm.distance,aForm.weight,aForm.ppvField,aForm.distanceField,aForm.weightField);
setTextToSelItem(aForm.ppvField,aForm.ppv,aForm.distanceField,aForm.distance,aForm.weightField,aForm.weight)"
>
</font></div>
</td>
<td width="34%" height="40">
<div align="center"> <font color="#0000FF"> </font></div>
</td>
</tr>
<tr>
<td width="28%" height="32">
<div align="center"><font color="#0000FF"></font></div>
</td>
<td width="38%" height="32">
<div align="center"><font color="#0000FF">
<input type="button" name="clearBtn2"
value="Clear Selected Item"
onClick="aForm.ppvField.value='';aForm.distanceField.value='';aForm.weightField.value='';
clearListItem(aForm.ppv,aForm.distance,aForm.weight);
setTextToSelItem(aForm.ppvField, aForm.ppv,aForm.distanceField,aForm.distance,aForm.weightField,aForm.weight)"
>
</font></div>
</td>
<td width="34%" height="32">
<div align="center"><font color="#0000FF"></font></div>
</td>
</tr>
<tr>
<td width="28%" height="33">
<div align="center"><font color="#0000FF"></font></div>
</td>
<td width="38%" height="33">
<div align="center"> <font color="#0000FF">
<input type="button" name="addBtn"
value="Add Item"
onClick="addListItem(aForm.ppv,aForm.distance,aForm.weight)"
>
</font></div>
</td>
<td width="34%" height="33">
<div align="center"><font color="#0000FF"></font></div>
</td>
</tr>
<tr>
<td height="36" width="28%">�</td>
<td height="36" width="38%">
<div align="center"><font color="#0000FF">
<input type="submit" name="Submit"
value="Submit" >
</font></div>
</td>
<td height="36" width="34%">
<div align="center"></div>
</td>
</tr>
<tr>
<td height="36" width="28%">
<div align="center"><font color="#0000FF"></font></div>
</td>
<td height="36" width="38%">
<div align="center"> <font color="#0000FF">
<input type="hidden" name="numDataPoints">
</font></div>
</td>
<td height="36" width="34%">
<div align="center"><font color="#0000FF"></font></div>
</td>
</tr>
</table>
</div>
<P><BR>
<BR>
<BR>
<BR>
</FORM>
</BODY>
</HTML>

I am interested in what you mentioned that you have done. It sounds interesting.
Thanks again
Ruilin
[This message has been edited by ruilin yang (edited November 27, 2001).]
[This message has been edited by ruilin yang (edited November 27, 2001).]

Chris Treglio

Ranch Hand

Posts: 64

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I tried to get your posted code to work, I really did, but all the line breaks introduced when it was pasted into the forum made me lose patience.
Let's hope the same doesn't happen to my code, which I mentioned before . . .
function changeToField(td){
newChild = document.createElement('INPUT');
newChild.setAttribute('TYPE','TEXT');
newChild.setAttribute('value',td.firstChild.data);
newChild.attachEvent('onblur',changeToText);
td.replaceChild(newChild,td.firstChild);
}
function changeToText(){
textel = document.createTextNode(event.srcElement.value);
event.srcElement.parentNode.replaceChild(textel,event.srcElement);
}

These functions are called by a table that might look like this
<table border=1>
<tr>

<td ondblclick=changeToField(this)>
Row One, Cell One
</td>

<td ondblclick=changeToField(this)>
Row One, Cell Two
</td>
<td ondblclick=changeToField(this)>
Row One, Cell Three
</td>
<td ondblclick=changeToField(this)>
Row One, Cell Four
</td>
</tr>
<tr>

<td ondblclick=changeToField(this)>
Row Two, Cell One
</td>

<td ondblclick=changeToField(this)>
Row Two, Cell Two
</td>
<td ondblclick=changeToField(this)>
Row Two, Cell Three
</td>
<td ondblclick=changeToField(this)>
Row Two, Cell Four
</td>
</tr>

</table>
This mostly works in IE 5.0 and 5.5 (and I'm presuming 6). It won't work in netscape, because of the attachEvent syntax, but netscape has a simliar function of a different name which can be used there.
Hope this is helpful...

ruilin yang

Ranch Hand

Posts: 334

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Chris,
Thanks. Here is the code I add some wrapper on top of you code.
Yes I can change things in a cell. It works great. However, I also like to automatically add new rows after one row of data is input and the return key is hit.
When all cells is cleared, then the row should be dispeared.
Do you know how to modify you code to incorporate what I mentioned above?
Thanks
Ruilin
<html> <head> <title>Untitled Document</title>
<TITLE>Select Option</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OLD BROWSERS
function changeToField(td){
newChild = document.createElement('INPUT');
newChild.setAttribute('TYPE','TEXT');
newChild.setAttribute('value',td.firstChild.data);
newChild.attachEvent('onblur',changeToText);
td.replaceChild(newChild,td.firstChild);
}
function changeToText(){
textel = document.createTextNode(event.srcElement.value);
event.srcElement.parentNode.replaceChild(textel,event.srcElement);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">

<table border=1>
<tr>
<td ondblclick=changeToField(this)>
Row One, Cell One
</td>
<td ondblclick=changeToField(this)>
Row One, Cell Two
</td>
<td ondblclick=changeToField(this)>
Row One, Cell Three
</td>
<td ondblclick=changeToField(this)>
Row One, Cell Four
</td>
</tr>
<tr>
<td ondblclick=changeToField(this)>
Row Two, Cell One
</td>
<td ondblclick=changeToField(this)>
Row Two, Cell Two
</td>
<td ondblclick=changeToField(this)>
Row Two, Cell Three
</td>
<td ondblclick=changeToField(this)>
Row Two, Cell Four
</td>
</tr>

</table>
</BODY>
</HTML>

[This message has been edited by ruilin yang (edited November 27, 2001).]

Chris Treglio

Ranch Hand

Posts: 64

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

probably your best bet is to have "add row" and "delete row" buttons. Without too much trouble you could turn this thing into a full fledged highlighting table, and the delete row function would act on the currently highlighted row. "Add row" could append a row to the end of the table.
The problem with having a row inserted when the user presses the return key is that you wouldn't be immediately certain where the row should be added. And what if the user was pressing the return key for another reason altogether? I would however like to see a tabbing from one editable cell to the next, maybe with the tab key, or maybe with the return.

ruilin yang

Ranch Hand

Posts: 334

posted 22 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanx Chris,
You are right to use buttons better.
Any new thought please let me know. I will try it soon.
Regards,
Ruilin

Heroic work plunger man. Please allow me to introduce you to this tiny ad:

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser