 |
|||||
|
As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only. Join the TIBCO Community
Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community. | |||||
Focal Point 
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point Add row to a table with javascript
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point Add row to a table with javascript Read-Only TopicGo | Search | Notify | Tools |
| Add row to a table with javascript | Login/Join |
| Platinum Member |
Hi Focals, i konow that could be better solved with MAINTAIN. But we do not have a MAINTAIN Liscence. I have to build an editable table where i can add an extra row to enter additional data to the table. Later i will save the changes with a MODIFY command, but that is not such a big thing. The user will call the table and depending on his or her location the table has n rows. So i need to count the rows before hand and tell the javascript after which row the additional row has to appear. My problem is that i got some code, but the script erases a row instead off adding it. Hope that is not to confusing!!! Here is my code!!!
-SET &ECHO=ON;
-? &
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
TABLE FILE CAR
PRINT MODEL
-*WHERE CAR EQ 'BMW'
ON TABLE HOLD AS COUNT1
END
-RUN
-*-EXIT
DEFINE FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
ADDROW/A200='<input type=button value="+/-" onClick="showHide(&LINES);"</input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I2= LAST ROWCNT + 1;
COMPUTE COL1/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL1" id="R8C1" /> ' ELSE
'<input type="text" name="COL1" id="R'||EDIT(ROWCNT)||'C1" value="'||CAR||'" />' ; AS 'CAR'
COMPUTE COL2/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL2" id="R8C2" />' ELSE
'<input type="text" name="COL2" id="R'||EDIT(ROWCNT)||'C2" value="'||MODEL||'" />'; AS 'MODEL'
COMPUTE COL3/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL3" id="R8C3" />' ELSE
'<input type="text" name="COL3" id="R'||EDIT(ROWCNT)||'C3" value="'||BODYTYPE||'" />'; AS 'BODYTYPE'
BY MODEL NOPRINT
ON TABLE HEADING
"<ADDROW"
ON TABLE SUBFOOT
"<LOADDATA"
-*WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
function showHide(onRow){
var doFrom = onRow +1;
var tbl = document.getElementsByTagName('TABLE');
var rows = document.getElementsByTagName('TR');
var nextStyle=rows[doFrom].style.display;
if (nextStyle != 'none'){
for ( i=doFrom; i<20;i++) {
rows[i].style.display='none';
}
}
else
rows[doFrom].style.display='';
}
</script>
</head>
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END
Regards Christian WF Production Version: 7.7.02M WF Test Version: 7.7.02M Developer Studio: 7.7.02 HTML, EXL2K, FLEX, PDF,PPT | ||
|
| Master |
I think FreSte or JG posted some code a while back that did some stuff like this. - ABT
------------------------------------ WF Environment: ------------------------------------ Server/Client, ReportCaster, Dev Studio: 7.6.11 Resource Analyzer, Resource Governor, Library, Maintain, InfoAssist OS: Windows Server 2003 Application/Web Server: Tomcat 5.5.25 Java: JDK 1.6.0_03 Authentication: LDAP, MRREALM Driver Output: PDF, EXL2K, HTM ------------------------------------ Databases: ------------------------------------ Oracle 10g DB2 (AS/400) MSSQL Server 2005 Access/FoxPro | |||
|
| Expert |
I am a little confused, as your code only shows/hides an existing row. If you want to add a new row, then try this script. <script javascript>
function showHide(onRow){
var doFrom = parseInt(onRow);
var tbl = document.getElementsByTagName('TABLE');
var newRow = tbl[0].insertRow(doFrom) ;
var idx = "00" + (doFrom+1).toString() ;
var rid = idx.substr(idx.length - 2,2) ;
addCell(doFrom+1,newRow,'','') ;
addCell('',newRow,'COL1','R'+ rid + 'C1') ;
addCell('',newRow,'COL2','R'+ rid + 'C2') ;
addCell('',newRow,'COL3','R'+ rid + 'C3') ;
function addCell(val,row,name,id) {
var newCol = row.insertCell() ;
if (newCol.cellIndex==0) {
newCol.innerText = val ;
}
else {
var newInput = document.createElement('INPUT') ;
newInput.name = name ;
newInput.id = id ;
newInput.value = val ;
newCol.appendChild(newInput) ;
}
}
}
It does add a row at a certain point, but if you need your id's to be in sequence, then this will be more difficult. Waz...
| |||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||
| Platinum Member |
Hi Waz, that,s cool and quiete close to my needs. I just want to add the row(s) at the bottom of the table. So i thouhgt i need to count the lines put this value into the js to tell the script where the row has to be placed. In my case the car file has 18 lines and i want to place the row at line 19. But the code adds the row at place 17 th. Played a lot with my friends "try" and "error" but could not solve it!!! Regards Christian WF Production Version: 7.7.02M WF Test Version: 7.7.02M Developer Studio: 7.7.02 HTML, EXL2K, FLEX, PDF,PPT | |||
|
| Virtuoso |
To add a row, you need to create a new row with content and append it to the table-body. That will automatically place it at the end of your table. Creating the row is the hard part here (and the code you showed us doesn't look like it does that at all). It goes like this:
var tr = document.createElement('tr');
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');
var cell3 = document.createElement('td');
tr.appendChild(cell1);
tr.appendChild(cell2);
tr.appendChild(cell3);
...and that's just a row with 3 empty cells. Easier is to use the JQuery framework to do the work for you, like so:
$('table/tbody').append('<tr><td></td><td></td><td></td></tr>');
WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010 : Member of User Group Benelux : | |||
|
| Platinum Member |
You can do this using SQL Passthough as well feeding your entries as variables:
ENGINE SQLORA SET DEFAULT_CONNECTION [adapter name]
SQL SQLORA SET ERRORTYPE DBMS
SQL SQLORA [or SQLMSS, SQLDB, etc.]
INSERT INTO [your tablename]
(COUNTRY, CAR, MODEL)
VALUES ('&COUNTRY', '&CAR', '&MODEL');
END
WF 7.7.04, WF 8.0.7, Win7, Win8, Linux, UNIX, Excel, PDF | |||
|
| Expert |
With a little change, you can add to the end. But the end is not the last row in the table, but the last data row. -SET &ECHO=ON;
-? &
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
TABLE FILE CAR
PRINT CAR MODEL BODYTYPE
-*WHERE CAR EQ 'BMW'
ON TABLE HOLD AS COUNT1
END
-RUN
-*-EXIT
DEFINE FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
ADDROW/A200='<input type=button value="+/-" onClick="showHide(currRows);"</input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I2= LAST ROWCNT + 1;
COMPUTE COL1/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL1" id="R8C1" /> ' ELSE
'<input type="text" name="COL1" id="R'||EDIT(ROWCNT)||'C1" value="'||CAR||'" />' ; AS 'CAR'
COMPUTE COL2/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL2" id="R8C2" />' ELSE
'<input type="text" name="COL2" id="R'||EDIT(ROWCNT)||'C2" value="'||MODEL||'" />'; AS 'MODEL'
COMPUTE COL3/A200= IF ROWCNT EQ &LINES + 1 THEN '<input type="text" name="COL3" id="R8C3" />' ELSE
'<input type="text" name="COL3" id="R'||EDIT(ROWCNT)||'C3" value="'||BODYTYPE||'" />'; AS 'BODYTYPE'
BY MODEL NOPRINT
ON TABLE HEADING
"<ADDROW"
ON TABLE SUBFOOT
"<LOADDATA"
-*WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
currRows = &LINES ;
function showHide(onRow){
var headerLines = 1 ;
var titleLines = 1 ;
var doFrom = parseInt(onRow) + headerLines + titleLines ;
var tbl = document.getElementsByTagName('TABLE');
var newRow = tbl[0].insertRow(doFrom) ;
currRows++ ;
var idx = "00" + (doFrom+1).toString() ;
var rid = idx.substr(idx.length - 2,2) ;
addCell(doFrom+1-headerLines-titleLines ,newRow,'','') ;
addCell('',newRow,'COL1','R'+ rid + 'C1') ;
addCell('',newRow,'COL2','R'+ rid + 'C2') ;
addCell('',newRow,'COL3','R'+ rid + 'C3') ;
function addCell(val,row,name,id) {
var newCol = row.insertCell() ;
if (newCol.cellIndex==0) {
newCol.innerText = val ;
newCol.align='right' ;
}
else {
var newInput = document.createElement('INPUT') ;
newInput.name = name ;
newInput.id = id ;
newInput.value = val ;
newCol.appendChild(newInput) ;
}
}
}
</script>
</head>
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM ENDKeep in mind that this sort of thing may have problems in the future, if IBI decide to change the structure of the HTML output. Also this script has only been tested in IE. Waz...
| |||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||
| Platinum Member |
Hi Waz, perfect!!!!! I know that is impudent, but i got a new requirement. I need to add a ckeckbox to the new row(s). As i did in the source table.
-SET &ECHO=ON;
-? &
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
TABLE FILE CAR
PRINT MODEL
-*WHERE CAR EQ 'BMW'
ON TABLE HOLD AS COUNT1
END
-RUN
-*-EXIT
DEFINE FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
ADDROW/A200='<input type=button value="+/-" onClick="showHide(&LINES);"</input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I2= LAST ROWCNT + 1;
COMPUTE COL1/A200='<input type="text" name="COL1" value="'||CAR||'" />' ; AS 'CAR'
COMPUTE COL2/A200='<input type="text" name="COL2" value="'||MODEL||'" />'; AS 'MODEL'
COMPUTE COL3/A200='<input type="text" name="COL3" value="'||BODYTYPE||'" />'; AS 'BODYTYPE'
COMPUTE CHECKED/A200=IF CAR EQ 'BMW' THEN '<input type="checkbox" id="checked" name="checked" CHECKED>' ELSE '<input type="checkbox" id="checked" name="checked" alt="Relevant ja/nein"">'; AS 'OK'
BY MODEL NOPRINT
ON TABLE HEADING
"<ADDROW"
ON TABLE SUBFOOT
"<LOADDATA"
-*WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
currRows = &LINES ;
function showHide(onRow){
var headerLines = 1 ;
var titleLines = 1 ;
var doFrom = parseInt(onRow) + headerLines + titleLines ;
var tbl = document.getElementsByTagName('TABLE');
var newRow = tbl[0].insertRow(doFrom) ;
currRows++ ;
var idx = "00" + (doFrom+1).toString() ;
var rid = idx.substr(idx.length - 2,2) ;
addCell(doFrom+1-headerLines-titleLines ,newRow,'','') ;
addCell('',newRow,'COL1') ;
addCell('',newRow,'COL2') ;
addCell('',newRow,'COL3') ;
function addCell(val,row,name,id) {
var newCol = row.insertCell() ;
if (newCol.cellIndex==0) {
newCol.innerText = val ;
newCol.align='right' ;
}
else {
var newInput = document.createElement('INPUT') ;
newInput.name = name ;
newInput.id = id ;
newInput.value = val ;
newCol.appendChild(newInput) ;
}
}
}
</script>
</head>
-*<body onLoad="initialHide();">
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END Regards and a nice weekend to all!!! Christian WF Production Version: 7.7.02M WF Test Version: 7.7.02M Developer Studio: 7.7.02 HTML, EXL2K, FLEX, PDF,PPT | |||
|
| Virtuoso |
Ehrm... id's are supposed to be unique in a HTML page, but you're repeating the same computed field with the same id on every data-row. It's going to be a 'woman of negotiable affection' to reference such checkboxes from Javascript. Perhaps you meant to set the class-attribute instead? With regards to the checkbox, that's just an input field with it's type set to 'checkbox' and a checked attribute to set it checked (any attribute-value will do). You can copy the necessary bits from the else-block in your addCell function and add the necessary attributes. (It's good form to add 'type="text"' for the case you're already covering too) WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010 : Member of User Group Benelux : | |||
|
| Platinum Member |
Hi Wep5622, my javscript knowledge is to bad, now i am mixing the text and checkboxes, but i only want the checkbox in the last column.
-SET &ECHO=ON;
-? &
-DEFAULTH &STARTAT='DATAGRID';
-DEFAULTH &MATCHKEY='XYZ'
-GOTO &STARTAT.EVAL
-DATAGRID
TABLE FILE CAR
PRINT MODEL
-*WHERE CAR EQ 'BMW'
ON TABLE HOLD AS COUNT1
END
-RUN
-*-EXIT
DEFINE FILE CAR
LOADDATA/A200='<input type=button value="Load" onClick="doLoad();"></input>';
ADDROW/A200='<input type=button value="+/-" onClick="showHide(&LINES);"</input>';
END
TABLE FILE CAR
PRINT
COMPUTE ROWCNT/I2= LAST ROWCNT + 1;
COMPUTE COL1/A200='<input type="text" name="COL1" value="'||CAR||'" />' ; AS 'CAR'
COMPUTE COL2/A200='<input type="text" name="COL2" value="'||MODEL||'" />'; AS 'MODEL'
COMPUTE COL3/A200='<input type="text" name="COL3" value="'||BODYTYPE||'" />'; AS 'BODYTYPE'
COMPUTE CHECKED/A200=IF CAR EQ 'BMW' THEN '<input type="checkbox" id="checked" name="COL4" CHECKED>' ELSE '<input type="checkbox" id="checked" name="COL4" alt="Relevant ja/nein"">'; AS 'OK'
BY MODEL NOPRINT
ON TABLE HEADING
"<ADDROW"
ON TABLE SUBFOOT
"<LOADDATA"
-*WHERE RECORDLIMIT EQ 8
ON TABLE HOLD AS DATAGRID FORMAT HTMTABLE
ON TABLE SET PAGE NOLEAD
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script javascript>
currRows = &LINES ;
function showHide(onRow){
var headerLines = 1 ;
var titleLines = 1 ;
var doFrom = parseInt(onRow) + headerLines + titleLines ;
var tbl = document.getElementsByTagName('TABLE');
var newRow = tbl[0].insertRow(doFrom) ;
currRows++ ;
var idx = "00" + (doFrom+1).toString() ;
var rid = idx.substr(idx.length - 2,2) ;
addCell(doFrom+1-headerLines-titleLines ,newRow,'','') ;
addCell('',newRow,'COL1') ;
addCell('',newRow,'COL2') ;
addCell('',newRow,'COL3') ;
addCell('',newRow,'COL4') ;
function addCell(val,row,name,id) {
var newCol = row.insertCell() ;
if (newCol.cellIndex==0) {
newCol.innerText = val ;
newCol.align='right' ;
}
else {
var newInput = document.createElement('INPUT') ;
var newInput1 = document.createElement('INPUT') ;
newInput1.setAttribute("type","checkbox");
newInput1.checked = true;
newInput.name = name ;
newInput.id = id ;
newInput.value = val ;
newCol.appendChild(newInput) ;
newCol.appendChild(newInput1) ;
}
}
}
</script>
</head>
-*<body onLoad="initialHide();">
!IBI.FIL.DATAGRID;
</body>
</html>
-HTMLFORM END
Thanks a lot!!! Christian WF Production Version: 7.7.02M WF Test Version: 7.7.02M Developer Studio: 7.7.02 HTML, EXL2K, FLEX, PDF,PPT | |||
|
| Expert |
You could use the following changes to your JavaScript functions - <script javascript>
var currRows = &LINES ;
function showHide(onRow){
var headerLines = 1 ;
var titleLines = 1 ;
var doFrom = parseInt(currRows) + headerLines + titleLines ;
var tbl = document.getElementsByTagName('TABLE');
var newRow = tbl[0].insertRow(doFrom) ;
currRows += 1 ;
var idx = "00" + (doFrom+1).toString() ;
var rid = idx.substr(idx.length - 2,2) ;
addCell(doFrom+1-headerLines-titleLines ,newRow,'','') ;
addCell('',newRow,'COL1',rid,'text') ;
addCell('',newRow,'COL2',rid,'text') ;
addCell('',newRow,'COL3',rid,'text') ;
addCell('',newRow,'COL4',rid,'checkbox') ;
}
function addCell(val,row,name,id,ctrltype) {
var newCol = row.insertCell() ;
if (newCol.cellIndex==0) {
newCol.innerText = val ;
newCol.align='right' ;
} else {
var newInput = document.createElement('INPUT') ;
newInput.setAttribute("type",ctrltype);
newInput.name = name ;
newInput.id = id ;
newInput.value = val ;
newCol.appendChild(newInput) ;
}
}
</script>TThis message has been edited. Last edited by: Tony A,
| |||||||||
|
| Powered by Social Strata |
 | Please Wait. Your request is being processed... |
Read-Only TopicFocal Point Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point Add row to a table with javascript
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point Add row to a table with javascriptCopyright © 1996-2020 Information Builders
| View $GS_USERNAME's Public Profile |
| Add $GS_USERNAME to my Ignore List |
| View Recent Posts by $GS_USERNAME |
| Notify me of New Posts by $GS_USERNAME |