1 Replies - 658 Views - Last Post: 30 August 2013 - 03:55 AM

#1 Gkp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 29-August 13

how to add multiple rows dynamically to a table using javascript

Posted 30 August 2013 - 03:41 AM

hi,
1)i have a table "maintable"
2)inside "maintable" i have 3 rows calles "row1" "row2" "row3".
3)in "row1" i have [+] and[-] button to add and delete respectively, when i click [+] "row1" "row2" "row3" should add at once, and same for [-] to delete.
4) and also i have "Address Seq Num " in "row1" the value of this should be 1,2,3..like serial number for the sucessive additon of rows.

5)and in "row3" i have table called "innertable" ,inside this it has body called "innerbody" inside this it has a row called "innerrow" this "innerrow also had [+][-] buttons.
6)this "innerrow" should be added when [+] is clicked and shluld be deleted when [-] button clicked.
please help me..i'm strucked in this...


 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Address Detail</title>
    <script language="javascript">
    
    </SCRIPT>
    </head>
    <div id="content" style=";height:200px;width:450px;float:left;">
    
    <table align="center" id="maintable" style="width:200%" >
    
    <tbody id="tablebody" >
    <tr id="row1">
    <td>
    
    <div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
    <table align="center" style="width:99%" >
    
    <tr style="background-color:#1E90FF">
    <td align="left" style="width:30%">
    Address Seq Num 
    <input style="float:center;width:50px" type="text" value="1" readonly id="seqm" name="seq" readonly>
    </td>
    
    <td  width="50%" >
    <input style="width:80%" type="text" value="Reg.office/Primary Office">
    </td>
    
    <td align="right">
    <input style="width:30px" type="button" onclick="cloneRow1();" value="+" >
    <input style="width:30px"  type="button" value="-" onclick="delRow1();">
    </td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    
    <tr id="row2" >
    <td>
    <div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
    <table align="center" style="width:99%" >
    <tr >
    <td align="left" >
    Effective Date:
    <input   style="position:absolute;left:30.1%;background-color:white" size="8.9px" type="text"  name="effdte" class="tcal" value="<%=(String)session.getAttribute("efdate") %>" readonly>
    </td>
    <td style="width:50%"align="left">
     
    Effective Status:
    
    <select name="eff_status" style="float:right;width:105px" id="estatus" >
    
    <option  value=""   > </option>
    
    </select>
    </td>
    </tr>
    
    <tr>
    <td>
    Country: &nbsp;
    
    <select style="position:absolute;left:30.3%;width:105px" name="country">
    <option value=""></option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    State:
    <select style="position:absolute;left:30.3%;width:105px" name="state">
    
    </select>
    
    </td>
    </tr>
    
    <tr>
    <td>
    City:
    
    <input style="position:absolute;left:30.3%;float:right" type="text" name="city"  value="<%=(String)session.getAttribute("city") %>" >
    
    </td>
    </tr>
    <tr>
    <td>
    Area:
    
    <input style="position:absolute;left:30.3%;float:right" type="text" name="area"  value="<%=(String)session.getAttribute("county") %>" >
    
    </td>
    </tr>
    <tr>
    <td>
    Postal Pin:
    
    <input style="position:absolute;left:30.3%;float:right" type="text" name="ppin"  value="<%=(String)session.getAttribute("postal") %>" >
    
    </td>
    </tr>
    
    <tr>
    <td>
    Url
    <input style="position:absolute;left:30.3%;width:20%;float:right" type="text" name="url"  value="<%=(String)session.getAttribute("email") %>" >
    </td>
    </tr>
    
    <tr>
    <td>
    <div id="placeholder">
      <div id="template">
    <fieldset> 
     <legend class="th" id="blahblah" align="left">Buisness Address</legend>
     
    
     
     <input style="width:90%" type="text" name="address1"  value="" >
     <input style="width:90%" type="text" name="address2" value="" >
     <input style="width:90%" type="text" name="address3"  value="" >
     <input style="width:90%" type="text" name="address4"  value="" >
      </fieldset>
     </div>
     </div>
    
     
     </td>
     </tr>
    
     
    
    </table>
    </div>
    </td>
    </tr>
    
    <tr id="row3">
    <td>
    <div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
    <table align="center" id="innertable" style="width:99%">
    
    <tbody id="innerbody">
    
    <tr >
    <td></td>
    <td>Phone Type </td>
    <td>Country code </td>
    <td>Phone Number </td>
    <td>Extension </td>
    
    </tr>
    
    <tr id="innerrow">
    <td></td>
    <td >
    <select style="width:145px" name="ph">
    <option value="none"><---select---></option>
    <option value="Mobile">Mobile</option>
    <option value="Landline">Land line</option>
    
    </select>
    </td>
    
    <td><input type="text" name="countrycode"></td>
    <td> <input type="text" name="ph"></td>
    <td><input type="text" name="ext"></td>
    <td align="right">
    <input style="width:30px" type="button" onclick="cloneRow()"value="+" >
    <input style="width:30px"  type="button" value="-" onclick="delRow()">
    </td>
    </tr>
    
    </tbody>
    </table>
    </div>
    
    </td>
    </tr>
    
    
    
    </tbody>
    </table>
    
    </div>
    </body>
    </html>




Is This A Good Question/Topic? 0
  • +

Replies To: how to add multiple rows dynamically to a table using javascript

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3517
  • View blog
  • Posts: 10,146
  • Joined: 08-June 10

Re: how to add multiple rows dynamically to a table using javascript

Posted 30 August 2013 - 03:55 AM

see http://www.dreaminco...-into-database/ for more details.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1