Dynamically added Row is Invisible in another javascript function..?

Ads
 

Dynamically added Row is Invisible in another javascript function..?

I have table as below, I need to create 5 default rows, ( this is fine with below code)..but when add row its creating row in a table, but the created row is not visibile in another java script function. scripts are pasted at the bottom. please help me.

<table border='0' cellpadding=3 cellspacing=1 align="left" width="80%"
        id="dtlstable"
        style="border-width: 1px; border-color: #000000; border-style: solid;">

        <tr>
            <td align="left">First Name</td>
            <td align="left">Last Name</td>
            <td align="left">Email ID</td>
            <td align="left">Delete</td>
        </tr>
        <logic:present scope="request" name="searchDetail">
            <logic:empty scope="request" name="searchDetail">
                <%
                    for (int i = 1; i <= 5; i++) {
                %>
                <tr>
                    <td align="left"><html:text styleId='<%="fNameId"+i%>'
                        property="comForm.fName" value='${detail.fName}'
                        onkeypress="return check(event)" onkeyup="upperCase(this.id)"
                        styleClass="regTextbox" /></td>
                    <td align="left"><html:text styleId='<%="lNameId"+i%>'
                        property="comForm.lName" value='${detail.lName}'
                        onkeypress="return check(event)" onkeyup="upperCase(this.id)"
                        styleClass="regTextbox" /></td>
                    <td align="left"><html:text styleId='<%="eMailId"+i%>'
                        property="comForm.emailID" value='${detail.emailID}'
                        onkeypress="return check(event)" onchange="checkEmail(this.id)"
                        styleClass="regTextbox" /></td>
                </tr>
                <%
                    }
                %>
            </logic:empty>
        </logic:present>

function addRow(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    i = rowCount;

    var tBody = table.getElementsByTagName('tbody')[0];
    var newTR = document.createElement('tr');
    var newTD1 = document.createElement('td');
    var newTD2 = document.createElement('td');
    var newTD3 = document.createElement('td');

    newTD1.innerHTML="<INPUT type= 'text' styleId='fName"+i+"' name='comForm.fName' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";


    newTD2.innerHTML="<INPUT type= 'text' styleId='lName"+i+"' name='comForm.lName' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";

    newTD3.innerHTML="<INPUT type= 'text' styleId='eMailId"+i+"' name='comForm.emailID' value='' onkeypress='return check(event)' onkeyup='upperCase(this.id)' class='regTextbox' />";

    newTR.appendChild (newTD1);
    newTR.appendChild (newTD2);
    newTR.appendChild (newTD3);
    tBody.appendChild(newTR);
}

function saveAll(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    var saveEmails = "";
    alert(rowCount);
     for ( k=1; k<=rowCount-1; k++){
         alert(document.getElementById('fNameId'+k).value);
         if( document.getElementById('fNameId'+k).value!='' && document.getElementById('lNameId'+k).value && document.getElementById('eMailId'+k).value!=''){
             saveEmails += document.getElementById('fNameId'+k).value +"~"+
                        document.getElementById('lNameId'+k).value +"~"+
                        document.getElementById('eMailId'+k).value +"^";
         }
     }

     document.getElementById('methoId').value = "saveEmails" ;
     document.getElementById('saveEmailsId').value = saveEmails ;
    // document.getElementById('communicationFormId').submit();
     document.forms[0].submit();
}
View Answers

Ads









Related Tutorials/Questions & Answers:
Dynamically added Row is Invisible in another javascript function..?
JavaScript add row dynamically to table
Advertisements
how to access element added via javascript dynamically using jsp code
jtable-adding a row dynamically
dynamically writing text javascript
dynamically writing text javascript
Insert specific fields into table dynamically for each row.
retrieving values from dynamically added textboxes in jsp - JSP-Servlet
add one row after another
Insert specific fields into table dynamically for each row.
Adding button to each row for the table and adding row to another table
JavaScript add row to table
javascript
invisible watermarking
How to give value for select in HTML dynamically using javascript
Dynamically Swapping Images with JavaScript
How to Validate dynamically created text box in HTML using Javascript
How to Dragging and dropping HTML table row to another position(In Jsp) and save the new position (values) also in database(MySql)?
Dragging and dropping HTML table row to another position(In Jsp) and save the new position (values) also in database
JavaScript insertCell method
JavaScript - JavaScript Tutorial
Javascript Examples
ModuleNotFoundError: No module named 'invisible-ink'
ModuleNotFoundError: No module named 'invisible-ui'
passing textbox value from one page to another page using html n javascript
JavaScript createAttribute method
Browser Back Button Disable/Hide/Invisible using Java Script
ModuleNotFoundError: No module named 'django-invisible-recaptcha-admin'
ModuleNotFoundError: No module named 'django-invisible-recaptcha-admin'
JavaScript
Dynamically hide textbox

Ads