Monday 28 October 2013

Dynamically Add/Remove Rows In HTML Table Using JavaScript and Jquery




 <link href="Styles/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<script> $(document).ready(function(){ function Reset() { //$("#tblpodetail").empty(); $("#rerID").hide(); $("#lblmsg").html(''); //$("#totalamt").html(''); //$("#container tr").remove(); } function valid() { var id = $('.trdelete').attr('id').split('-')[1]; //alert(id); return false; } $("#addanother").click(function(){ $("#rerID").show(); //validateForm(); var count = 0; $("#container tr").each(function () { count++; }); var str='<tr id ="tr-' + count + '" ><td align="center" height="35px">
<select class="degreeclass" name="degree-' + count + '" id="degree-' + count + '"
style="background-color:#F8FCFC; color:#284D4D;"><option>
</option><option value="10th">10th</option><option value="12th">12th</option>
<option value="B.A">B.A</option> <option value="B.SC">B.SC</option>
<option value="B.COM">B.COM</option> <option value="BBA">BBA</option>
<option value="BCA">BCA</option><option value="B.Tech">B.Tech</option>
<option value="M.A">M.A</option> <option value="M.SC">M.SC</option>
<option value="M.COM">M.COM</option> <option value="MBA">MBA</option>
<option value="MCA">MCA</option><option value="M.Tech">M.Tech</option>
</select></td><td align="center" height="35px">
<input style="background-color:#F8FCFC; color:#284D4D;" type="text"
name="year_of_passing-' + count + '" id="year_of_passing-' + count + '" size="5"/>
</td><td><center><a href="#" class="trdelete" id ="delete-' + count + '">delete</a>
</center> </td></tr>';
$("#container").append(str); }); $("#Reset").live('click', function () { $("#btnshow").show(); $("#btndelete").hide(); Reset(); return false; }); $("#submit").live('click', function () { //valid(); validateForm(); return true; }); $(".trdelete").live('click', function () { var id = $(this).attr('id').split('-')[1]; var trid = "#tr-" + id; //alert(trid); $(trid).remove(); return false; }); $("#btndelete").click(function () { if (confirm('Are you sure want to delete This.') === true) { PoDelete($("#txtpoid").val()); } else { return false; } }); $("#btnok").live('click', function () { var count = 0; var itemcode = ''; $(".item").each(function () { if (this.checked === true) { count++; itemcode = $(this).attr('id'); } }); if (count === 0) { //alert('Please select at least one item.'); $("#rerID").append('<p>Please select at least one item.</p>'); Reset(); } else { $(UniversalId).val(itemcode); if (UniversalId === '#txtpoid') { $("#txtpoid").change(); } else { $(".itemcode").change(); } $(".black_overlay").hide(); $("#div-child").hide(); } return false; }); }); </script> <script> function validateForm() { var x=document.forms["eduform"]["degree"].value; if (x==null || x=="") { document.forms["eduform"]["degree"].focus(); document.forms["eduform"]["degree"].style.borderColor='#FF778B'; document.forms["eduform"]["degree"].style.borderWidth='1px'; document.forms["eduform"]["degree"].style.borderStyle='solid'; alert("Qualification must be filled out"); $("#rerID").html('<p style="color:RED;">Qualification must be filled out.</p>'); $( "#degree" ).focus(); return false; } else{ $("#rerID").html(''); } var y=document.forms["eduform"]["year_of_passing"].value; if (y==null || y=="") { document.forms["eduform"]["year_of_passing"].focus(); document.forms["eduform"]["year_of_passing"].style.borderColor='#FF778B'; document.forms["eduform"]["year_of_passing"].style.borderWidth='1px'; document.forms["eduform"]["year_of_passing"].style.borderStyle='solid'; alert("Year Of Passing must be filled out"); $("#rerID").html('<p style="color:RED;">Year Of Passing must be filled out.</p>'); $( "#year_of_passing" ).focus(); return false; } else{ $("#rerID").html(''); } } </script>

<P align="center" style="color:#386B6B;">
<%
if
(request.getParameter("msg")!=null){out.println(request.getParameter("msg"));}
%></p>
<body>
  <div align="center">
  <div style="border:1px solid #386B6B; background-color:#d7eaea; width:800px; height:auto;">
  <div style="background-color:#d7eaea;width:800px;height:60px;padding-top:10px;font-size:35px;color:#386B6B;">Employee Education</div>
  <form action="emp_edu_action.jsp" method="post" name="eduform" id="eduform" onsubmit="return validateForm();">
    <div>
<table id="container" border="1px" cellpadding="0" style="color:#386B6B; width: 800px; border-collapse: collapse;" >
       <tr>
      <td align="center" height="35px"><strong>Qualification:</strong></td>
<td align="center"height="35px"><strong>Year Of Passing:</strong></td>
<td align="center"height="35px"><b>Operation</b></td>
</tr>
<tr><td align="center"height="35px">
<select name="degree" onClick="this.style.borderColor='#333EFF';this.style.borderStyle='solid';this.style.borderWidth='1px'" style="background-color:#F8FCFC;color:#284D4D;">
<option></option>
<option value="B.A">B.A</option>
<option value="B.SC">B.SC</option>
<option value="B.COM">B.COM</option>
<option value="BBA">BBA</option>
<option value="BCA">BCA</option>
<option value="B.Tech">B.Tech</option>
<option value="M.A">M.A</option>
<option value="M.SC">M.SC</option>
<option value="M.COM">M.COM</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select></td>           
<td align="center"height="35px"><input style="background-color:#F8FCFC; color:#284D4D;" type="text" name="year_of_passing" id="year_of_passing" size="5" onClick="this.style.borderColor='#333EFF';this.style.borderStyle='solid';this.style.borderWidth='1px'"/></td>
   <td align="center"rowspan="auto"height="35px"><input style="background-color:#9DCCCC; color:#284D4D;" type="button" id="addanother" class="addanother" value="add more" onclick="return validateForm();"></td>
</tr>
</table>
<table>
 <tr>
<td id="rerID">  </td>
 </tr>
<tr height="35px">
         <td ><input style="background-color:#9DCCCC; color:#284D4D;width:60px; height:25px;font-size:15px;"" type="submit" value="Submit" id="submit" name="submit"/>
<input style="background-color:#9DCCCC; color:#284D4D;width:60px; height:25px;font-size:15px;"" type="reset" value="Reset" id="Reset" name="Reset"/>
</td>
</tr>
</table>
  </div>
  </form>
  </div>
  </div>
</body>
</html>

No comments:

Post a Comment