Advertisement
Guest User

Untitled

a guest
Dec 2nd, 2012
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.71 KB | None | 0 0
  1. <HTML>
  2. <HEAD>
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  4.     <script src="js/jquery.min.js" type="text/javascript"></script>
  5. <script type="text/javascript">
  6.     $(document).ready(function(){
  7.         $('#btnSubmit').click(function(){
  8.             $.ajax({
  9.                 type: "POST",
  10.                 url: 'http://funiks.com/invoice/phonebook/submit_new_contact_multiple_ajax.php',
  11.                 data: "chkbox=" + $('#chkbox').val() + "&txtone=" + $('#txtone').val() + "&txttwo=" + $('#txttwo').val(),
  12.                 success: function(data){
  13.                     $('#status').html(data);
  14.                     $('#chkbox').val('');
  15.                     $('#txtone').val('');
  16.                     $('#txttwo').val('');
  17.                 }
  18.             });
  19.         });
  20.     });
  21. </script>
  22.    
  23.     <SCRIPT language="javascript">
  24.         function addRow(tableID) {
  25.  
  26.             var table = document.getElementById(tableID);
  27.  
  28.             var rowCount = table.rows.length;
  29.             var row = table.insertRow(rowCount);
  30.  
  31.             var cell1 = row.insertCell(0);
  32.             var element1 = document.createElement("input");
  33.             element1.type = "checkbox";
  34.             cell1.appendChild(element1);
  35.  
  36.             var cell2 = row.insertCell(1);
  37.             cell2.innerHTML = rowCount + 1;
  38.  
  39.             var cell3 = row.insertCell(2);
  40.             var element2 = document.createElement("input");
  41.             element2.type = "text";
  42.             cell3.appendChild(element2);
  43.            
  44.             var cell4 = row.insertCell(3);
  45.             var element3 = document.createElement("input");
  46.             element3.type = "text";
  47.             cell4.appendChild(element3);
  48.  
  49.  
  50.         }
  51.  
  52.         function deleteRow(tableID) {
  53.             try {
  54.             var table = document.getElementById(tableID);
  55.             var rowCount = table.rows.length;
  56.  
  57.             for(var i=0; i<rowCount; i++) {
  58.                var row = table.rows[i];
  59.                var chkbox = row.cells[0].childNodes[0];
  60.                if(null != chkbox && true == chkbox.checked) {
  61.                    table.deleteRow(i);
  62.                    rowCount--;
  63.                    i--;
  64.                }
  65.  
  66.  
  67.            }
  68.            }catch(e) {
  69.                alert(e);
  70.            }
  71.        }
  72.  
  73.    </SCRIPT>
  74. </HEAD>
  75. <BODY>
  76.  
  77.     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  78.  
  79.     <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  80.  
  81.     <TABLE id="dataTable" width="350px"  border="1">
  82.         <TR>
  83.             <TD><INPUT type="checkbox" name="chk[]" id="chkbox"/></TD>
  84.             <TD> 1 </TD>
  85.             <TD> <INPUT type="text" name="txt[]"id="txtone"/> </TD>
  86.             <TD><INPUT type="text" name="txt1[]" "texttwo"/></TD>
  87.         </TR>
  88.         <button type="button" name="btnSubmit" id="btnSubmit">Submit</button>
  89.     </TABLE>
  90.  
  91. </BODY>
  92. </HTML>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement