This week's book giveaway is in the Jobs Discussion forum.
We're giving away four copies of Soft Skills and have John Sonmez on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes How to fill an HTML table using javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to fill an HTML table using javascript" Watch "How to fill an HTML table using javascript" New topic
Author

How to fill an HTML table using javascript

Olivier López
Ranch Hand

Joined: Jan 31, 2010
Posts: 32
Hello People
I would really appreciate if you can help me with this one

Theres a website with an HTML table, and it looks like this:


I developed a java software with an embeded internet browser on it, and i want to open the website of the picture above and fill
all the table fields by just clicking a button on my software.
I extract all the data from a data base, and now i need to run a javascript command to paste that data into the website table fields.

The problem is that I dont have any knowledge on javascript, so i dont know how to start. I would appreciate if someone can give me a piece of javascript
code to fill just one of the fields, so then i can figure out how to fill the other fields.


To make things easier, here I attach the source code from the website, so you can see the table inputs and code:

<TABLE class=tableLayout id=table4 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR style="DISPLAY: none">
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD>
<TD class="" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: red" width=47></TD></TR>
<TR id="" style="HEIGHT: 35px">
<TD class="h_border_onlyColumn_first ellipsisCell subgroupings-right" onclick="" colSpan=7 height=35>  </TD></TR>
<TR id="" style="HEIGHT: 35px">


<TD class="h_border_middleRow_first ellipsisCell tab-list-data-R" onclick="" height=35><INPUT class="field-value-nopad field-right-aligned" id=TASK_3697650_30065_0 onblur=timesheet.cellBlur(this); maxLength=6 onchange="timesheet.cellChangeDaily(this,0,0, 'ae(3697650)');" size=1 value=0.00 name=TASK_3697650_30065_0><INPUT id=TASK_3697650_30065_0_date type=hidden value=10/07/11> </TD>


<TD class="h_border_middleRow_middle ellipsisCell tab-list-data-R" onclick="" height=35><INPUT class="field-value-nopad field-right-aligned" id=TASK_3697650_30065_1 onblur=timesheet.cellBlur(this); maxLength=6 onchange="timesheet.cellChangeDaily(this,0,1, 'ae(3697650)');" size=1 value=0.00 name=TASK_3697650_30065_1><INPUT id=TASK_3697650_30065_1_date type=hidden value=11/07/11> </TD>



As I told before, i dont have javascript knowledges, but i believe the " id=TASK_3697650_30065_1" and "value=0.00" fields i set on bold color, are important fields I need.
For instance, i need a javascript code that let me replace the value "0.00" for a different one, like "1.99" or "2.04", but i dont really know the syntax of the javascript code
i need to run for this purpose.



In case the HTML code i posted is not helpful, i found another piece of code that could contain related info about this table:


<SCRIPT language=javascript src="/itg/js/tm/WorkItem.js?v=d456163ed2ef6308dfd3c3909b8dba9e"></SCRIPT>

<SCRIPT language=javascript>
timesheet.workItems = [
new WorkItem('0','3697650','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'18',0.0,false,1),
new WorkItem('1','3697642','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'12',0.0,false,1),
new WorkItem('2','3697643','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'6',0.0,false,1),
new WorkItem('3','3697644','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'15',0.0,false,1),
new WorkItem('4','3697645','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'24',0.0,false,1),
new WorkItem('5','3697646','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'25',0.0,false,1),
new WorkItem('6','3697647','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'22',0.0,false,1),
new WorkItem('7','3697648','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'17',0.0,false,1),
new WorkItem('8','3697649','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'26',0.0,false,1),
new WorkItem('9','3697641','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'21',0.0,false,1),
new WorkItem('10','3697633','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'1',0.0,false,1),
new WorkItem('11','3697635','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'8',0.0,false,1),
new WorkItem('12','3697637','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'10',0.0,false,1),
new WorkItem('13','3697638','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'14',0.0,false,1),
new WorkItem('14','3697639','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'11',0.0,false,1),
new WorkItem('15','3697640','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'3',0.0,false,1),
new WorkItem('16','3697659','TASK','91672','30102',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'19',0.0,false,1),
new WorkItem('17','3697632','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'20',0.0,false,1),
new WorkItem('18','3697634','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'2',0.0,false,1),
new WorkItem('19','3697651','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'7',0.0,false,1),
new WorkItem('20','3697636','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'9',0.0,false,1),
new WorkItem('21','3697652','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'23',0.0,false,1),
new WorkItem('22','3799692','TASK','91672','30102',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'5',0.0,false,1),
new WorkItem('23','3697654','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'27',0.0,false,1),
new WorkItem('24','3697653','TASK','91672','30065',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'4',0.0,false,1),
new WorkItem('25','3697657','TASK','91672','30300',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'13',0.0,false,1),
new WorkItem('26','3697658','TASK','91672','30102',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'16',0.0,false,1),
new WorkItem('27','12','MISC','1','30322',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'0',0.0,false,1),
new WorkItem('28','5','MISC','1','30105',0,0,[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],'28',0.0,false,1)];
</SCRIPT>



Thanks in advance for taking the time to read this¡
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

To set the value of a field with an id value of xyz, you'd use:


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Olivier López
Ranch Hand

Joined: Jan 31, 2010
Posts: 32
Bear Bibeault wrote:To set the value of a file with an id value of xyz, you'd use:


You dont have an idea how much I was looking for this¡¡¡
Thanks a ton¡¡¡
You are a life saver¡¡¡
It worked like a charm¡¡¡
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

You're welcome!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to fill an HTML table using javascript