For my record only.
I wrote a dynamic HTML table with JavaScript by self whitin few days. It's really painful..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>ABC Message Engine</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<LINK href="theme/systemStyle.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<script type="text/javascript">
var originJrns = [];
originJrns[0] = ['98119', 'IPO123', 'MT502' ];
originJrns[1] = ['98117', 'IPOANN', 'seev.001.001.04' ];
originJrns[2] = ['98118', 'TKOANN', 'MT508' ];
//functions for Advice Printcode selection box
function getPrintCode(){
var printCode = [];
printCode[0] = ['IPO123'];
printCode[1] = ['IPOANN'];
printCode[2] = ['TKO123'];
printCode[3] = ['TKOANN'];
return printCode;
}
function onTrnTypeChange(currentRow){
var table = document.getElementById("maintTable");
var trnTypeObj = table.rows[currentRow.rowIndex].cells[1].childNodes[0]; //trnType select obj
var actTypeObj = table.rows[currentRow.rowIndex].cells[1].childNodes[1];//actType select obj
var trnType = trnTypeObj.value;
var i;
var max = actTypeObj.options.length;
for(i=0;i<max;i++){
actTypeObj.options.remove(0);
}//remove all; reset
//reformat trn-act map selects
var printCode = getPrintCode();
for(i=0;i<4;i++){
var trn = printCode[i][0].substring(0,3);
var act = printCode[i][0].substring(3,6);
if(trn==trnType){
actTypeObj.options.add(new Option(act,act));
}
}
}
//functions for Advice Printcode selection box
//Gin
function onCategoryChange(currentRow){
var table = document.getElementById("maintTable");
var msgCategoryObj = table.rows[currentRow.rowIndex].cells[2].childNodes[0]; //msgCategory select obj
var msgTypeObj = table.rows[currentRow.rowIndex].cells[2].childNodes[1];//msgType select obj
var msgCategory = msgCategoryObj.value;
var i;
var max = msgTypeObj.options.length;
for(i=0;i<max;i++){
msgTypeObj.options.remove(0);
}
if(msgCategory=="MT"){
msgTypeObj.options.add(new Option('MT502','MT502'));
msgTypeObj.options.add(new Option('MT508','MT508'));
msgTypeObj.options.add(new Option('MT515','MT515'));
msgTypeObj.options.add(new Option('MT535','MT535'));
msgTypeObj.options.add(new Option('MT536','MT536'));
msgTypeObj.options.add(new Option('MT537','MT537'));
msgTypeObj.options.add(new Option('MT540','MT540'));
msgTypeObj.options.add(new Option('MT541','MT541'));
msgTypeObj.options.add(new Option('MT542','MT542'));
msgTypeObj.options.add(new Option('MT543','MT543'));
msgTypeObj.options.add(new Option('MT544','MT544'));
msgTypeObj.options.add(new Option('MT545','MT545'));
msgTypeObj.options.add(new Option('MT546','MT546'));
msgTypeObj.options.add(new Option('MT547','MT547'));
msgTypeObj.options.add(new Option('MT548','MT548'));
msgTypeObj.options.add(new Option('MT564','MT564'));
msgTypeObj.options.add(new Option('MT566','MT566'));
msgTypeObj.options.add(new Option('MT567','MT567'));
msgTypeObj.options.add(new Option('MT568','MT568'));
msgTypeObj.options.add(new Option('MT578','MT578'));
msgTypeObj.options.add(new Option('MT586','MT586'));
msgTypeObj.options.add(new Option('MT598','MT598'));
msgTypeObj.options.add(new Option('MT599','MT599'));
}else{
msgTypeObj.options.add(new Option('seev.001.001.04','seev.001.001.04'));
msgTypeObj.options.add(new Option('seev.002.001.04','seev.002.001.04'));
msgTypeObj.options.add(new Option('seev.003.001.04','seev.003.001.04'));
msgTypeObj.options.add(new Option('seev.006.001.04','seev.006.001.04'));
msgTypeObj.options.add(new Option('semt.015.002.01','semt.015.002.01'));
msgTypeObj.options.add(new Option('semt.020.002.01','semt.020.002.01'));
msgTypeObj.options.add(new Option('sese.020.002.01','sese.020.002.01'));
msgTypeObj.options.add(new Option('sese.023.002.01','sese.023.002.01'));
msgTypeObj.options.add(new Option('sese.024.002.01','sese.024.002.01'));
msgTypeObj.options.add(new Option('sese.025.002.01','sese.025.002.01'));
msgTypeObj.options.add(new Option('sese.026.002.01','sese.026.002.01'));
msgTypeObj.options.add(new Option('sese.028.002.01','sese.028.002.01'));
msgTypeObj.options.add(new Option('setr.004.001.03','setr.004.001.03'));
msgTypeObj.options.add(new Option('setr.004.002.01','setr.004.002.01'));
msgTypeObj.options.add(new Option('setr.006.002.01','setr.006.002.01'));
msgTypeObj.options.add(new Option('setr.010.001.03','setr.010.001.03'));
msgTypeObj.options.add(new Option('setr.010.002.01','setr.010.002.01'));
msgTypeObj.options.add(new Option('setr.012.002.01','setr.012.002.01'));
}
}
function getMTMsgtype(msgType){
//***************** Msg type dropdown
var msgtype_pulldown;
msgtype_pulldown = '<select name="msgType" value="">';
if(msgType=='MT502'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT502" selected="true">'
+ 'MT502' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT502" >'
+ 'MT502' + '</option>';
}
if(msgType=='MT508'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT508" selected="true">'
+ 'MT508' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT508" >'
+ 'MT508' + '</option>';
}
if(msgType=='MT515'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT515" selected="true">'
+ 'MT515' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT515" >'
+ 'MT515' + '</option>';
}
if(msgType=='MT535'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT535" selected="true">'
+ 'MT535' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT535" >'
+ 'MT535' + '</option>';
}
if(msgType=='MT536'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT536" selected="true">'
+ 'MT536' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT536" >'
+ 'MT536' + '</option>';
}
if(msgType=='MT537'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT537" selected="true">'
+ 'MT537' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT537" >'
+ 'MT537' + '</option>';
}
if(msgType=='MT540'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT540" selected="true">'
+ 'MT540' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT540" >'
+ 'MT540' + '</option>';
}
if(msgType=='MT541'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT541" selected="true">'
+ 'MT541' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT541" >'
+ 'MT541' + '</option>';
}
if(msgType=='MT542'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT542" selected="true">'
+ 'MT542' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT542" >'
+ 'MT542' + '</option>';
}
if(msgType=='MT543'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT543" selected="true">'
+ 'MT543' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT543" >'
+ 'MT543' + '</option>';
}
if(msgType=='MT544'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT544" selected="true">'
+ 'MT544' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT544" >'
+ 'MT544' + '</option>';
}
if(msgType=='MT545'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT545" selected="true">'
+ 'MT545' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT545" >'
+ 'MT545' + '</option>';
}
if(msgType=='MT546'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT546" selected="true">'
+ 'MT546' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT546" >'
+ 'MT546' + '</option>';
}
if(msgType=='MT547'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT547" selected="true">'
+ 'MT547' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT547" >'
+ 'MT547' + '</option>';
}
if(msgType=='MT548'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT548" selected="true">'
+ 'MT548' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT548" >'
+ 'MT548' + '</option>';
}
if(msgType=='MT564'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT564" selected="true">'
+ 'MT564' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT564" >'
+ 'MT564' + '</option>';
}
if(msgType=='MT566'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT566" selected="true">'
+ 'MT566' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT566" >'
+ 'MT566' + '</option>';
}
if(msgType=='MT567'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT567" selected="true">'
+ 'MT567' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT567" >'
+ 'MT567' + '</option>';
}
if(msgType=='MT568'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT568" selected="true">'
+ 'MT568' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT568" >'
+ 'MT568' + '</option>';
}
if(msgType=='MT578'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT578" selected="true">'
+ 'MT578' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT578" >'
+ 'MT578' + '</option>';
}
if(msgType=='MT586'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT586" selected="true">'
+ 'MT586' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT586" >'
+ 'MT586' + '</option>';
}
if(msgType=='MT598'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT598" selected="true">'
+ 'MT598' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT598" >'
+ 'MT598' + '</option>';
}
if(msgType=='MT599'){
msgtype_pulldown = msgtype_pulldown + '<option value ="MT599" selected="true">'
+ 'MT599' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="MT599" >'
+ 'MT599' + '</option>';
}
msgtype_pulldown = msgtype_pulldown + '</select>';
return msgtype_pulldown;
//***************** end dropdown
}
function getMXMsgtype(msgType){
//***************** Msg type dropdown
var msgtype_pulldown;
msgtype_pulldown = '<select name="msgType" value="">';
if(msgType=='seev.001.001.04'){
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.001.001.04" selected="true">'
+ 'seev.001.001.04' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.001.001.04" >'
+ 'seev.001.001.04' + '</option>';
}
if(msgType=='seev.002.001.04'){
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.002.001.04" selected="true">'
+ 'seev.002.001.04' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.002.001.04" >'
+ 'seev.002.001.04' + '</option>';
}
if(msgType=='seev.003.001.04'){
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.003.001.04" selected="true">'
+ 'seev.003.001.04' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.003.001.04" >'
+ 'seev.003.001.04' + '</option>';
}
if(msgType=='seev.006.001.04'){
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.006.001.04" selected="true">'
+ 'seev.006.001.04' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="seev.006.001.04" >'
+ 'seev.006.001.04' + '</option>';
}
if(msgType=='semt.015.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="semt.015.002.01" selected="true">'
+ 'semt.015.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="semt.015.002.01" >'
+ 'semt.015.002.01' + '</option>';
}
if(msgType=='semt.020.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="semt.020.002.01" selected="true">'
+ 'semt.020.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="semt.020.002.01" >'
+ 'semt.020.002.01' + '</option>';
}
if(msgType=='sese.020.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.020.002.01" selected="true">'
+ 'sese.020.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.020.002.01" >'
+ 'sese.020.002.01' + '</option>';
}
if(msgType=='sese.023.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.023.002.01" selected="true">'
+ 'sese.023.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.023.002.01" >'
+ 'sese.023.002.01' + '</option>';
}
if(msgType=='sese.024.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.024.002.01" selected="true">'
+ 'sese.024.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.024.002.01" >'
+ 'sese.024.002.01' + '</option>';
}
if(msgType=='sese.025.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.025.002.01" selected="true">'
+ 'sese.025.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.025.002.01" >'
+ 'sese.025.002.01' + '</option>';
}
if(msgType=='sese.026.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.026.002.01" selected="true">'
+ 'sese.026.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.026.002.01" >'
+ 'sese.026.002.01' + '</option>';
}
if(msgType=='sese.028.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.028.002.01" selected="true">'
+ 'sese.028.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="sese.028.002.01" >'
+ 'sese.028.002.01' + '</option>';
}
if(msgType=='setr.004.001.03'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.004.001.03" selected="true">'
+ 'setr.004.001.03' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.004.001.03" >'
+ 'setr.004.001.03' + '</option>';
}
if(msgType=='setr.004.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.004.002.01" selected="true">'
+ 'setr.004.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.004.002.01" >'
+ 'setr.004.002.01' + '</option>';
}
if(msgType=='setr.006.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.006.002.01" selected="true">'
+ 'setr.006.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.006.002.01" >'
+ 'setr.006.002.01' + '</option>';
}
if(msgType=='setr.010.001.03'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.010.001.03" selected="true">'
+ 'setr.010.001.03' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.010.001.03" >'
+ 'setr.010.001.03' + '</option>';
}
if(msgType=='setr.010.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.010.002.01" selected="true">'
+ 'setr.010.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.010.002.01" >'
+ 'setr.010.002.01' + '</option>';
}
if(msgType=='setr.012.002.01'){
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.012.002.01" selected="true">'
+ 'setr.012.002.01' + '</option>';
}else{
msgtype_pulldown = msgtype_pulldown + '<option value ="setr.012.002.01" >'
+ 'setr.012.002.01' + '</option>';
}
msgtype_pulldown = msgtype_pulldown + '</select>';
return msgtype_pulldown;
//***************** end dropdown
}
//For Action Select Box Event START
function onAmendAction(id){
var jrnIdx = 0;
for(jrnIdx=0; jrnIdx<originJrns.length; jrnIdx++){
if(originJrns[jrnIdx][0] == id)break;
}
edit(id, originJrns[jrnIdx][1], originJrns[jrnIdx][2]);
}
function onDeleteAct(id){
var jrnIdx = 0;
for(jrnIdx=0; jrnIdx<originJrns.length; jrnIdx++){
if(originJrns[jrnIdx][0] == id)break;
}
document.getElementById("AdvPrtCde" + id).innerHTML = '<s>' + originJrns[jrnIdx][1] + '</s>'
+ '<input type="hidden" name="AdvPrtCde" value="' + originJrns[jrnIdx][1] + '">'
+ '<input type="hidden" name="trnType" value="'+ originJrns[jrnIdx][1].substr(0,3)
+ '" /><input type="hidden" name="actType" value="'+originJrns[jrnIdx][1].substr(3,6)+'" />';
document.getElementById("MsgType" + id).innerHTML = '<s>' + originJrns[jrnIdx][2] + '</s>'
+ '<input type="hidden" name="msgType" value="'+ originJrns[jrnIdx][2] +'" />';
}
function onUndoAct(id){
var jrnIdx = 0;
for(jrnIdx=0; jrnIdx<originJrns.length; jrnIdx++){
if(originJrns[jrnIdx][0] == id)break;
}
document.getElementById("AdvPrtCde" + id).innerHTML = originJrns[jrnIdx][1]
+ '<input type="hidden" name="AdvPrtCde" value="' + originJrns[jrnIdx][1] + '">'
+ '<input type="hidden" name="trnType" value="'+ originJrns[jrnIdx][1].substr(0,3)
+ '" /><input type="hidden" name="actType" value="' + originJrns[jrnIdx][1].substr(3,6)+'" />';
document.getElementById("MsgType" + id).innerHTML = originJrns[jrnIdx][2] + '<input type="hidden" name="msgType" value="'+ originJrns[jrnIdx][2] +'" />';
document.getElementById("Act" + id).innerHTML
= '<input type="button" value="Edit" ' +
'οnclick="edit(\'' + id + '\', \'' + originJrns[jrnIdx][1] + '\', \'' + originJrns[jrnIdx][2] + '\')" ' +
'title="Edit" /><input type="hidden" name="action" value="UNDO"/>';
}
function onActionChange(actSel, id){
var action = actSel.value;
if(action == 'DELETE'){
onDeleteAct(id);
}else if(action == 'UNDO'){
onUndoAct(id);
}else if(action == 'AMEND'){
onAmendAction(id)
}
}
//For Action Select Box Event Box END
function formatAdvPrtCdeSelBox(advPrtCde){
var trnType = advPrtCde.substr(0,3);//default trnType
var actType = advPrtCde.substr(3,6);//default actType
//add trn type select box
//***************** trn type pulldown
var trntype_pulldown;
trntype_pulldown = '<select name="trnType" value="' + trnType +
'" οnchange="onTrnTypeChange(this.parentNode.parentNode)">';
if(trnType=='IPO'){
trntype_pulldown = trntype_pulldown + '<option value ="IPO" selected="true">'
+ 'IPO' + '</option>';
}else{
trntype_pulldown = trntype_pulldown + '<option value ="IPO">'
+ 'IPO' + '</option>';
}
if(trnType=='TKO'){
trntype_pulldown = trntype_pulldown + '<option value ="TKO" selected="true">'
+ 'TKO' + '</option>';
}else{
trntype_pulldown = trntype_pulldown + '<option value ="TKO">'
+ 'TKO' + '</option>';
}
trntype_pulldown = trntype_pulldown + '</select>';
//***************** end dropdown
//add action type select box
//***************** act type dropdown
var printCode = getPrintCode();
var acttype_pulldown;
acttype_pulldown = '<select name="actType" value="' + actType + '">';
if(trnType=="")trnType=printCode[0][0].substring(0,3); //set default value
for(i=0;i<4;i++){
trn = printCode[i][0].substring(0,3);
act = printCode[i][0].substring(3,6);
if(trnType==trn){
if(actType==act){
acttype_pulldown = acttype_pulldown + '<option value ="' + act + '" selected="true">'
+ act + '</option>';
}else{
acttype_pulldown = acttype_pulldown + '<option value ="' + act + '">'
+ act + '</option>';
}
}
}
acttype_pulldown = acttype_pulldown + '</select>';
//***************** end dropdown
return trntype_pulldown + acttype_pulldown;
}
function formatMsgTypeSelBox(msgType){
//Gin
//***************** Msg type dropdown
var isoType_pulldown;
var msgtype_pulldown;
var msgCategory;
if(msgType==""||msgType.match("MT")=="MT")
msgCategory = "MT";
else
msgCategory = "MX";
if(msgCategory == "MT"){
msgtype_pulldown = getMTMsgtype(msgType);
isoType_pulldown = '<select name="msgCategory" value="" οnchange="onCategoryChange(this.parentNode.parentNode)">' +
'<option value ="MT" selected="true">MT</option>' +
'<option value ="MX">MX</option>' +
'</select>';
}
else{
msgtype_pulldown = getMXMsgtype(msgType);
isoType_pulldown = '<select name="msgCategory" value="" οnchange="onCategoryChange(this.parentNode.parentNode)">' +
'<option value ="MT">MT</option>' +
'<option value ="MX" selected="true">MX</option>' +
'</select>';
}
//***************** end dropdown
return isoType_pulldown + msgtype_pulldown;
}
//edit function start
function edit(id, advPrtCde, msgType) {
//For Advice Printcode
document.getElementById("AdvPrtCde" + id).innerHTML = formatAdvPrtCdeSelBox(advPrtCde);//add 2 select boxes into
//For Message Type
//add message type select box
document.getElementById("MsgType" + id).innerHTML = formatMsgTypeSelBox(msgType); //add 2 select boxes into
//For Action
var act_pulldown;
act_pulldown = '<select name="action" οnchange="onActionChange(this,' + id + ')">;' +
'<option value ="AMEND">Amend</option>' +
'<option value ="DELETE">Delete</option>'+
'<option value ="UNDO">Undo</option>'+
'</select>';
document.getElementById("Act" + id).innerHTML = act_pulldown;
}
//edit function end
function retnEdit(id, advPrtCde, msgType) {
var jrnIdx = 0;
for(jrnIdx=0; jrnIdx<originJrns.length; jrnIdx++){
if(originJrns[jrnIdx][0] == id)break;
}
//For Advice Printcode
document.getElementById("AdvPrtCde" + id).innerHTML = '<input type="hidden" name="AdvPrtCde" value="' + originJrns[jrnIdx][1] + '">'
+ formatAdvPrtCdeSelBox(advPrtCde);//add 2 select boxes into
//For Message Type
//add message type select box
document.getElementById("MsgType" + id).innerHTML = formatMsgTypeSelBox(msgType); //add 2 select boxes into
//For Action
var act_pulldown;
act_pulldown = '<select name="action" οnchange="onActionChange(this,' + id + ')">;' +
'<option value ="AMEND">Amend</option>' +
'<option value ="DELETE">Delete</option>'+
'<option value ="UNDO">Undo</option>'+
'</select>';
document.getElementById("Act" + id).innerHTML = act_pulldown;
}
function mouseOnEvent(row){
row.className='searchResultRowOn';
row.style.cursor='hand';
}
function mouseOutEvent(row){
row.className='normalRow';
}
function addNewRow(currentRow, site, advPrtCde, msgType) {
//img-> cell-> row-> table
var obj_Table = document.getElementById("maintTable");
//alert(currentRow.rowIndex);
var newRow = obj_Table.insertRow(currentRow.rowIndex+1);
var newcell;
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = site+'<input type="hidden" name="jrnId" value="0">'; //site
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = formatAdvPrtCdeSelBox(advPrtCde); //trnType+actType
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
var txt = '<input type="hidden" name="crtRow" value="'+advPrtCde+msgType+'"/>'; //for recreate new added rows purpose when fail
newcell.innerHTML = formatMsgTypeSelBox(msgType) + txt;//msgType
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = '-'; //
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = '-'; //
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = '-'; //
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = 'Create<input type="hidden" name="action" value="CREATE">'; //action
newcell = newRow.insertCell();
newcell.align = "center";
newcell.vAlign="middle";
newcell.innerHTML = '<img src="images\\removeRow.gif" name="removeRowIcon" alt="Delete This New Record" οnclick="removeRow(this.parentNode.parentNode)"/>';
}
function removeRow(currentRow){
var obj_Table = currentRow.parentNode;
obj_Table.deleteRow(currentRow.rowIndex);
}
</script>
<FORM>
<table weight = "100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr height=50>
<!-- Start Header Images -->
<td valign="middle" height="44"><img src="images/logo_AABB.gif" alt=""></td>
<!-- End Header Images -->
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2"><img src = "images/AABB_Application_Logo.gif" border="0"></td>
<td width="600" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="100%" height=22 valign="top" background="images/bb00401g.gif"></td></tr></table>
</td>
<td valign="top"><img src = "images/bb00403g.gif"></td>
<td valign="top""><a href=# οnclick="javascript:window.close();"><img src = "images/close.gif" border="0"></a></td>
</tr>
</table>
</FORM>
<FORM method="POST" action="MSGUIServlet" name="Update_Form">
<!-- SwfMsgOptJrnUpdateForm -->
<table>
<tr>
<td>
<table>
<tr>
<td>
<H2>Maintain AABBB Message Group/Option</H2><H3>- Modify Draft Option</H3>
</td>
</tr>
<!-- Show error if any -->
<tr>
<td>
<TABLE class="searchCriteria">
<TBODY>
<TR>
<TD class=rowname>Site</TD>
<TD>
<I>
China (CN AABB)
</I>
</TD>
</TR>
<TR>
<TD class=rowname>Group ID</TD>
<TD>
<I>
T1234
</I>
</TD>
</TR>
<TR>
<TD class=rowname>Descrption</TD>
<TD>
<I>
Paul Test
</I>
</TD>
</TR>
</TBODY>
</TABLE>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td>
<TABLE class="detailTable">
<TR>
<TH>AABBB Message Option</TH>
</TR>
<tr>
</tr>
<tr>
<td>
<table class="searchOptResult" id="maintTable">
<TR class="searchResultHeaderRow">
<TH class="narrListHeaderWidthCERef">Site</TH>
<TH class="narrListHeaderWidthCERef">Advice Printcode</TH>
<TH class="narrListHeaderWidthCERef">Message Type</TH>
<TH class="narrListHeaderWidthCERef">Maintenance Code</TH>
<TH class="narrListHeaderWidthCERef">Capture by</TH>
<TH class="narrListHeaderWidthCERef">Capture Date</TH>
<TH align='middle'> Action</TH>
</TR>
<TR onMouseOver="mouseOnEvent(this)" onMouseOut="mouseOutEvent(this)">
<TD align='middle'>
China (CN AABB)
<input type='hidden' name="jrnId" value="98119">
</TD>
<TD align='middle' id="AdvPrtCde98119">
IPO123
<input type="hidden" name="AdvPrtCde" value="IPO123">
<input type='hidden' name="trnType" value="IPO" />
<input type='hidden' name="actType" value="123" />
</TD>
<TD align="middle" id="MsgType98119">
MT502
<input type='hidden' name="msgType" value="MT502" />
</TD>
<TD align='middle'>
Create
</TD>
<TD align='middle'>
simon
</TD>
<TD align='middle'>
12 Oct 2012 16:00:09
</TD>
<TD align='middle' id="Act98119">
<input type="button" value="Edit"
οnclick="edit('98119', 'IPO123', 'MT502')"
title="Edit"/>
<input type="hidden" name="action" value="UNDO"/>
</TD>
</TR>
<TR onMouseOver="mouseOnEvent(this)" onMouseOut="mouseOutEvent(this)">
<TD align='middle'>
China (CN AABB)
<input type='hidden' name="jrnId" value="98117">
</TD>
<TD align='middle' id="AdvPrtCde98117">
IPOANN
<input type="hidden" name="AdvPrtCde" value="IPOANN">
<input type='hidden' name="trnType" value="IPO" />
<input type='hidden' name="actType" value="ANN" />
</TD>
<TD align="middle" id="MsgType98117">
seev.001.001.04
<input type='hidden' name="msgType" value="seev.001.001.04" />
</TD>
<TD align='middle'>
-
</TD>
<TD align='middle'>
-
</TD>
<TD align='middle'>
-
</TD>
<TD align='middle' id="Act98117">
<input type="button" value="Edit"
οnclick="edit('98117', 'IPOANN', 'seev.001.001.04')"
title="Edit"/>
<input type="hidden" name="action" value="UNDO"/>
</TD>
</TR>
<TR onMouseOver="mouseOnEvent(this)" onMouseOut="mouseOutEvent(this)">
<TD align='middle'>
China (CN AABB)
<input type='hidden' name="jrnId" value="98118">
</TD>
<TD align='middle' id="AdvPrtCde98118">
TKOANN
<input type="hidden" name="AdvPrtCde" value="TKOANN">
<input type='hidden' name="trnType" value="TKO" />
<input type='hidden' name="actType" value="ANN" />
</TD>
<TD align="middle" id="MsgType98118">
MT508
<input type='hidden' name="msgType" value="MT508" />
</TD>
<TD align='middle'>
Amend
</TD>
<TD align='middle'>
simon
</TD>
<TD align='middle'>
12 Oct 2012 16:00:09
</TD>
<TD align='middle' id="Act98118">
<input type="button" value="Edit"
οnclick="edit('98118', 'TKOANN', 'MT508')"
title="Edit"/>
<input type="hidden" name="action" value="UNDO"/>
</TD>
</TR>
<!-- Show all related local & default swfMsg options below -->
<TR bgColor="#b6c9bc">
<TD align='middle'>
Default
<input type='hidden' value="97244">
</TD>
<TD align='middle'>
AHCINF
<input type='hidden' name="dftCde" value="AHCINF">
</TD>
<TD align='middle'>MT502</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
</TR>
<TR bgColor="#b6c9bc">
<TD align='middle'>
Default
<input type='hidden' value="97245">
</TD>
<TD align='middle'>
INTCAN
<input type='hidden' name="dftCde" value="INTCAN">
</TD>
<TD align='middle'>MT508</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
</TR>
<TR bgColor="#b6c9bc">
<TD align='middle'>
Default
<input type='hidden' value="97246">
</TD>
<TD align='middle'>
IPOANN
<input type='hidden' name="dftCde" value="IPOANN">
</TD>
<TD align='middle'>MT535</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
<TD align='middle'>-</TD>
</TR>
<!--insert new record here-->
</table>
</td>
</tr>
<tr>
<td>
<INPUT class="sub1" type="submit" onClick="return subBtnFunction('Save');" value="Save As Draft" title="Save the draft">
<INPUT class="sub1" type="submit" onClick="return subBtnFunction('Confirm');" value="Confirm" title="Submit to supervisor">
<INPUT class="sub1" type="submit" name="go_menu_MaintainAdvStatOpt" value="Back" title="Goto previous page">
<input type='hidden' name='updateConfirmAdvStatOpt' value='updateConfirmAdvStatOpt' >
<input type='hidden' name='updateSaveAsDraftAdvStatOpt' value='updateSaveAsDraftAdvStatOpt' >
</td>
</tr>
</TABLE>
</td>
</tr>
</table>
<script type="text/javascript">
//click submit button function
function subBtnFunction(btnName){
//check if any duplicated amended draft map - the same advPrtCde for local site
//none
var amdCnt = 0;
var delCnt = 0;
var crtCnt = 0;
var actions = document.getElementsByName("action");
if(actions){
for(i=0;i<actions.length;i++){
if(actions[i].value=="AMEND")amdCnt++;
if(actions[i].value=="DELETE")delCnt++;
if(actions[i].value=="CREATE")crtCnt++;
}
}
var confirmInfo;
if(btnName=="Confirm"){
var isAllNew = 'false'; //c if all jrn are new created
if(amdCnt==0 && delCnt!=0 && crtCnt==0 && isAllNew=='true'){
alert("No records can be submitted!Please use Save As Draft button!");//if yes , avoid to click confirm button
return false;
}
//confirmInfo.replace(/save/ig,'Confirm');
confirmInfo = "Are you sure to Confirm?" + "\n\r" +
"---------------------------" + "\n\r" +
"Amend: " + amdCnt + "" + "\n\r" +
"Create: " + crtCnt + "" + "\n\r" +
"Delete: "+ delCnt + "\n\r";
document.Update_Form.updateSaveAsDraftAdvStatOpt.disabled=true;
document.Update_Form.updateConfirmAdvStatOpt.disabled=false;
}else{
if(amdCnt!=0 || delCnt!=0 || crtCnt!=0){
}else{
alert("No record has been modified!");
return false;
}
confirmInfo = "Are you sure to Save?" + "\n\r" +
"---------------------------" + "\n\r" +
"Amend: " + amdCnt + "" + "\n\r" +
"Create: " + crtCnt + "" + "\n\r" +
"Delete: "+ delCnt + "\n\r";
document.Update_Form.updateConfirmAdvStatOpt.disabled=true;
document.Update_Form.updateSaveAsDraftAdvStatOpt.disabled=false;
}
var agree=confirm(confirmInfo);
if (agree){
disableAllBtns();
document.Update_Form.submit();
return true;
}
else{
return false;
}
}
function disableAllBtns() {
var numForms = document.forms.length;
for(i = 0; i < numForms; i++){
var formName = document.forms[i].name;
if(formName){
var myform = document.getElementsByName(formName);
var numElements = myform[0].elements.length;
var elemnt = null;
for (j = 0; j < numElements; j++) {
elemnt = myform[0].elements[j];
if (elemnt.type == "submit" || elemnt.type =="button") {
myform[0].elements[j].disabled = true;
}
}
}
}
}
//
function showDftRow(icon, rowindex){
var maintTable = document.getElementById("maintTable");
var row = maintTable.rows[rowindex];//defaultRow Obj
row.style.display="";
icon.parentNode.innerHTML = '<img src="images\\asc.png" alt="Hide Default Option" οnclick="hideDftRow(this,'+rowindex+')" />';
}
function hideDftRow(icon, rowindex){
var maintTable = document.getElementById("maintTable");
var row = maintTable.rows[rowindex];//defaultRow Obj
row.style.display="none";
icon.parentNode.innerHTML = '<img src="images\\desc.png" alt="Show Default Option" οnclick="showDftRow(this,'+rowindex+')"/>';
}
/**
function copy(fromRow, toRow){
for(i=0;i<fromRow.childNodes.length;i++){
var cell=toRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=fromRow.childNodes[i].innerHTML;
}
}
**/
function HideOtherDefRows(me){
var maintTable = document.getElementById("maintTable");
var iconIdx=0;//flag
var imgs = document.getElementsByName("removeRowIcon");
if(imgs.length>0){
var lastImg = imgs[imgs.length-1];
var iconIdx = lastImg.parentNode.parentNode.rowIndex;
}else{
iconIdx= document.getElementById("icon").parentNode.parentNode.rowIndex;
}
for(i=iconIdx+2;i<maintTable.rows.length;i++){//+2 icon > show > otherRecords
maintTable.rows[i].style.display="none";
}
me.parentNode.innerHTML='<font id="soHiTxt" size="1px" face="verdana" color="green" οnclick="showOtherDefRows(this)" οnmοuseοver="this.style.cursor=\'hand\'"><u>Show Remaining Default Option</u></font>';
}
function showOtherDefRows(me){
var maintTable = document.getElementById("maintTable");
var iconIdx=0;//flag
var imgs = document.getElementsByName("removeRowIcon");
if(imgs.length>0){
var lastImg = imgs[imgs.length-1];
var iconIdx = lastImg.parentNode.parentNode.rowIndex;
}else{
iconIdx= document.getElementById("icon").parentNode.parentNode.rowIndex;
}
for(i=iconIdx+2;i<maintTable.rows.length;i++){//+2 icon > show > otherRecords
maintTable.rows[i].style.display="";
}
me.parentNode.innerHTML='<font id="soHiTxt" size="1px" face="verdana" color="green" οnclick="HideOtherDefRows(this)" οnmοuseοver="this.style.cursor=\'hand\'"><u>Hide Remaining Default Option</u></font>';
}
function sortTheTable(){
var maintTable = document.getElementById("maintTable");
var jrnCdes = document.getElementsByName('AdvPrtCde');//input hidden
var dftCdes = document.getElementsByName("dftCde");//input hidden
var goSort = dftCdes.length;
var cntSort = 0; //how many dft rows are sorted
var index=0;
if(goSort>0) {//start to hide other dftRows
for(i=0;i<jrnCdes.length;i++){
var jrnCode = jrnCdes[i].value;//journal's advPrtCde
//alert('jrn'+i+jrnCode);
for(j=0;j<dftCdes.length;j++){
//if journal's advPrtCde equals to default's
if(jrnCode==dftCdes[j].value){
//then hide default one under journal
var jrnRow = jrnCdes[i].parentNode.parentNode;
var jrnRowIndex = jrnRow.rowIndex;
var dftRowIndex = dftCdes[j].parentNode.parentNode.rowIndex;
//alert(jrnCdes[i].parentNode.parentNode.rowIndex);
//ins dft row
var dftRow = maintTable.rows[dftRowIndex];//defaultRow Obj
var insRow = maintTable.insertRow(jrnRowIndex + 1);//New Row Under JrnRow
insRow.style.display="none";
insRow.style.backgroundColor="#b6c9bc";
//copy(dftRow, insRow);//Copy defaultRow Obj to new row
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[0].innerHTML;//Site
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[1].innerHTML;//Advice Printcode
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[2].innerHTML;//Message Type
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[3].innerHTML;//Maintenance Code
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[4].innerHTML;//Capture by
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[5].innerHTML;//Capture Date
var cell = insRow.insertCell();
cell.align = "center";
cell.vAlign="middle";
cell.innerHTML=dftRow.childNodes[6].innerHTML;//Action
var cell = jrnRow.insertCell();//add icon beside JrnRow
cell.innerHTML='<img src="images\\desc.png" alt="Show Default Option" οnclick="showDftRow(this,'+jrnRowIndex+'+1)"/>';
maintTable.deleteRow(dftRowIndex+1);//del origin defaultRow
index= jrnRowIndex + 1;//set the cursor of other records
cntSort++;
break;
}else{
var jrnRow = jrnCdes[i].parentNode.parentNode;
var jrnRowIndex = jrnRow.rowIndex;
index= jrnRowIndex;//set the cursor of other records
}
}
}
}else{
index=jrnCdes.length;
}
//Add icon
var addrow = maintTable.insertRow(index+1).insertCell();
index++;
addrow.innerHTML='<img id="icon" src="images\\addRow.gif" alt="Add New Row Below" οnclick="addNewRow(this.parentNode.parentNode, \'China (CN AABB)\', \'\', \'\')"/>';
var crtRows = document.getElementsByName('crtRow');//sort the new created rows if any
var len = crtRows.length;
if(len>0){
//if has new created rows, move them to the end of table
var iconIdx= document.getElementById("icon").parentNode.parentNode.rowIndex;
for(i=0;i<len;i++){
var values = crtRows[i].value; //e.g. DEPCNCsese.023.001.01
var advPrtCde = values.substring(0,6);//
var msgType = values.substring(6);//add new created row at the end of table
var crtRowIdx = crtRows[i].parentNode.parentNode.rowIndex;// input->TD->TR
maintTable.deleteRow(crtRowIdx);//del the new created row above
addNewRow(maintTable.rows[iconIdx], 'China (CN AABB)', advPrtCde, msgType);
iconIdx++;
index++;
}
}
if(goSort>0 && cntSort!=goSort) {//skip below if No dft code rows or all dft code rows are sorted
//Show Remaining Default Options OR Hide Remaining Default Options
var cell = maintTable.insertRow(index+1).insertCell();
index++;
var iconIdx=0;//flag
var imgs = document.getElementsByName("removeRowIcon");
if(imgs.length>0){
var lastImg = imgs[imgs.length-1];
var iconIdx = lastImg.parentNode.parentNode.rowIndex;
}else{
iconIdx= document.getElementById("icon").parentNode.parentNode.rowIndex;
}
cell.colSpan = 7;
cell.innerHTML='<font id="soHiTxt" size="1px" face="verdana" color="green" οnclick="showOtherDefRows(this)" οnmοuseοver="this.style.cursor=\'hand\'"><u>Show Remaining Default Option</u></font>';
//hide the dft rows at begin initialization //+2 icon > show > otherRecords
for(i=iconIdx+2;i<maintTable.rows.length;i++){
maintTable.rows[i].style.display="none";
//don't hide the new created rows
}
}
//highlight fail record if any
var str = ''; put AMEND; DELETE; UNDO; action fail
if(str!=""){
var action = str.substring(0, str.indexOf(":"));
var jrnId = str.substring(str.indexOf(":")+1);
var theRow = document.getElementById("AdvPrtCde"+jrnId).parentNode;
for(var i=0;i<7;i++){
theRow.cells[i].style.borderColor = '#ff0000';
theRow.cells[i].style.borderWidth = '2';
}
}
if(''!="") { put CREATE action fail
var r = parseInt('');
if(r>0){
var crtRow = document.getElementsByName('crtRow')[r-1].parentNode.parentNode;// input->TD->TR
for(var i=0;i<7;i++){
crtRow.cells[i].style.borderColor = '#ff0000';
crtRow.cells[i].style.borderWidth = '2';
}
}
}
}
sortTheTable();//sort the table
//font flash
if (document.getElementById("soHiTxt")){
var colors = ["green","black"];
var nextcolor = 0;
function changecolor(){
document.getElementById("soHiTxt").style.color = colors[nextcolor++];
nextcolor = nextcolor % colors.length;
}
//setInterval("changecolor()", 500);
}
</script>
</FORM>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
