File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes build a data entry sheet like spread-sheet Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "build a data entry sheet like spread-sheet" Watch "build a data entry sheet like spread-sheet" New topic
Author

build a data entry sheet like spread-sheet

ruilin yang
Ranch Hand

Joined: Feb 25, 2001
Posts: 334
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

Joined: Feb 25, 2001
Posts: 334
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

Joined: Jun 18, 2001
Posts: 64
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

Joined: Feb 25, 2001
Posts: 334
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.
<!--
Modified on 5/10/2001, Ruilin Yang

-->
<html> <head> <title>Untitled Document</title>
<TITLE>Select Option</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OLD BROWSERS
// store the text entered in the Input field
var newText = ""
// store the user's response
function setResponse(str) {
newText = str
}
// get the user's response
function getResponse() {
return newText
}

// select the next element for the user
function selectNextItem(sel1,sel2,sel3) {
var Index_1 = sel1.selectedIndex + 1
var Index_2 = sel2.selectedIndex + 1
var Index_3 = sel3.selectedIndex + 1
if (Index_1 >= sel1.length) {
sel1.options[0].selected = true
sel2.options[0].selected = true
sel3.options[0].selected = true
sel1.options[Index_1-1].selected = false
sel2.options[Index_1-1].selected = false
sel3.options[Index_1-1].selected = false
} else {
sel1.options[Index_1].selected = true
sel2.options[Index_2].selected = true
sel3.options[Index_3].selected = true
sel1.options[Index_1-1].selected = false
sel2.options[Index_1-1].selected = false
sel3.options[Index_1-1].selected = false
}
}
//select all values for each option when submit
function selectAll (sel1,sel2,sel3,numDataPoints) {
for (var i=0;i<sel1.length;i++) {
sel1.options[i].selected=true
sel2.options[i].selected=true
sel3.options[i].selected=true
}
numDataPoints.value= sel1.length }

//select all values when one record is selected
function selectAllTogether (sel1,sel2,sel3) {
var iselected=0
for (var i=0;i<sel1.length;i++) {
if (sel1.options[i].selected==true)
{ sel2.options[i].selected=true
sel3.options[i].selected=true
iselected = i
i=sel1.length-1;
}
}

for (var i=0;i<sel1.length;i++) {
if(i!=iselected) {
sel1.options[i].selected=false
sel2.options[i].selected=false
sel3.options[i].selected=false
}
}
}
// and store the response in the value property
function updateListItem(sel1,sel2,sel3,txt1,txt2,txt3) {
// set the text
sel1.options[sel1.selectedIndex].text =
(sel1.selectedIndex + 1) + ". " + txt1.value //getResponse()
sel1.options[sel1.selectedIndex].value = txt1.value //getResponse()
sel2.options[sel2.selectedIndex].text =
(sel2.selectedIndex + 1) + ". " + txt2.value //getResponse()
sel2.options[sel2.selectedIndex].value = txt2.value //getResponse()
sel3.options[sel3.selectedIndex].text =
(sel3.selectedIndex + 1) + ". " + txt3.value //getResponse()
sel3.options[sel3.selectedIndex].value = txt3.value //getResponse()

selectNextItem(sel1,sel2,sel3) // advance for the user
}
// clear the selected list element
function clearListItem(sel1,sel2,sel3) {
sel1.options[sel1.selectedIndex].text =
(sel1.selectedIndex + 1) + ". " +
" "
sel1.options[sel1.selectedIndex].value = ""
sel2.options[sel2.selectedIndex].text =
(sel2.selectedIndex + 1) + ". " +
" "
sel2.options[sel2.selectedIndex].value = ""
sel3.options[sel3.selectedIndex].text =
(sel3.selectedIndex + 1) + ". " +
" "
sel3.options[sel3.selectedIndex].value = ""

selectNextItem(sel1,sel2,sel3) // advance for the user
}
// add a list element to the end of the list
function addListItem(sel1,sel2,sel3) {
if (sel1) {
var txt1 = (sel1.length + 1) + ". " +
" "
// create new option at the end
sel1.options[sel1.length] =
new Option(txt1, "", false, false)
// Workaround for bug
//
// The option we just added with selected
// equal to false IS selected. Force the
// selection back to the element that
// Navigator thinks is selected.
//
// Occurs on: Navigtor 3.0b6, Solaris 2.4
// Navigtor 3.0b7, Mac
// Navigtor 3.0b7, Win95
//
// Verify on FCS
if(navigator.appVersion.indexOf("(X11") != -1
| | navigator.appVersion.indexOf("(Mac") != -1
| | navigator.appVersion.indexOf("(Win") != -1)
{
sel1.options[sel1.selectedIndex].selected=true
}
// refresh the page (required)
history.go(sel1.length + 1)
}

if (sel2) {
var txt = (sel2.length + 1) + ". " +
" "
// create new option at the end
sel2.options[sel2.length] =
new Option(txt, "", false, false)
// Workaround for bug
//
// The option we just added with selected
// equal to false IS selected. Force the
// selection back to the element that
// Navigator thinks is selected.
//
// Occurs on: Navigtor 3.0b6, Solaris 2.4
// Navigtor 3.0b7, Mac
// Navigtor 3.0b7, Win95
//
// Verify on FCS
if(navigator.appVersion.indexOf("(X11") != -1
| | navigator.appVersion.indexOf("(Mac") != -1
| | navigator.appVersion.indexOf("(Win") != -1)
{
sel2.options[sel2.selectedIndex].selected=true
}
// refresh the page (required)
history.go(sel2.length + 1)
}

if (sel3) {
var txt = (sel3.length + 1) + ". " +
" "
// create new option at the end
sel3.options[sel3.length] =
new Option(txt, "", false, false)
// Workaround for bug
//
// The option we just added with selected
// equal to false IS selected. Force the
// selection back to the element that
// Navigator thinks is selected.
//
// Occurs on: Navigtor 3.0b6, Solaris 2.4
// Navigtor 3.0b7, Mac
// Navigtor 3.0b7, Win95
//
// Verify on FCS
if(navigator.appVersion.indexOf("(X11") != -1
| | navigator.appVersion.indexOf("(Mac") != -1
| | navigator.appVersion.indexOf("(Win") != -1)
{
sel3.options[sel3.selectedIndex].selected=true
}
// refresh the page (required)
history.go(sel3.length + 1)
}
}
// set the text field's value to that of the
// selected element
function setTextToSelItem(txt1, sel1, txt2,sel2, txt3,sel3) {
selectAllTogether (sel1,sel2,sel3)
txt1.value = sel1.options[sel1.selectedIndex].value
txt2.value = sel2.options[sel2.selectedIndex].value
txt3.value = sel3.options[sel3.selectedIndex].value
}
// STOP HIDING -->
</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

Joined: Jun 18, 2001
Posts: 64
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

Joined: Feb 25, 2001
Posts: 334
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

Joined: Jun 18, 2001
Posts: 64
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

Joined: Feb 25, 2001
Posts: 334
Thanx Chris,
You are right to use buttons better.
Any new thought please let me know. I will try it soon.
Regards,
Ruilin
 
 
subject: build a data entry sheet like spread-sheet