Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <table width="50%" border="1" cellpadding="1" cellspacing="1" class="test" id="test">
- <tr id="columname">
- <th>Name</th>
- <th>Emp no.</th>
- <th>Company</th>
- <th>Mobile no.</th>
- </tr>
- <tr>
- <td>
- <input type="text" class="txtbox" value="" />
- <input type="button" value="Add" class="plusbtn" />
- <input type="button" value="Remove" class="minusbtn" />
- </td>
- <td>
- <input type="text" class="txtbox" value="" />
- <input type="button" value="Add" class="plusbtn1" />
- <input type="button" value="Remove" class="minusbtn1" />
- </td>
- <td>
- <input type="text" class="txtbox" value="" />
- <input type="button" value="Add" class="plusbtn2" />
- <input type="button" value="Remove" class="minusbtn2" />
- </td>
- <td>
- <input type="text" class="txtbox" value="" />
- <input type="button" value="Add" class="plusbtn3" />
- <input type="button" value="Remove" class="minusbtn3" />
- </td>
- </tr>
- </table>
- JQUERY :
- var Row = document.getElementById("columname");
- var Cells = Row.getElementsByTagName("th");
- $('#test').on('click','.plusbtn',function()
- {
- if(Cells[0].innerText == 'Name'){
- $('#test').append('<tr><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn" /><input type="button" value="Remove" class="minusbtn" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn1" /><input type="button" value="Remove" class="minusbtn1" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
- return false;
- }
- });
- if(Cells[1].innerText == 'Emp no.'){
- $('#test').on('click','.plusbtn1',function(){
- $('#test').append('<tr><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn1" /><input type="button" value="Remove" class="minusbtn1" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
- return false;
- });
- }
- if(Cells[2].innerText == 'Company'){
- $('#test').on('click','.plusbtn2',function(){
- $('#test').clone().append('<tr><td></td><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn2" /><input type="button" value="Remove" class="minusbtn2" /></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
- return false;
- });
- }
- if(Cells[3].innerText == 'Mobile no.'){
- $('#test').on('click','.plusbtn3',function(){
- $('#test').append('<tr><td></td><td></td><td></td><td><input type="text" class="txtbox" value="" /><input type="button" value="Add" class="plusbtn3" /><input type="button" value="Remove" class="minusbtn3" /></td></tr>');
- return false;
- });
- }
- $('#test').on('click','.minusbtn',function(){
- if($("#test tr").length != 2)
- {
- $(this).closest('tr').remove();
- return false;
- }
- else
- {
- alert("You cannot delete first row");
- }
- });
- $('#test').on('click','.minusbtn1',function(){
- if($("#test tr").length != 2)
- {
- $(this).closest('tr').remove();
- return false;
- }
- else
- {
- alert("You cannot delete first row");
- }
- });
- $('#test').on('click','.minusbtn2',function(){
- if($("#test tr").length != 2)
- {
- $(this).closest('tr').remove();
- return false;
- }
- else
- {
- alert("You cannot delete first row");
- }
- });
- $('#test').on('click','.minusbtn3',function(){
- if($("#test tr").length != 2)
- {
- $(this).closest('tr').remove();
- return false;
- }
- else
- {
- alert("You cannot delete first row");
- }
- });
- CSS:
- txtbox { border: none; width: 100%; } input { font-size: 17px; height: 30px;
- } table { background: none repeat scroll 0 0 ; border: 1px solid #000; } #test { border-collapse: separate; empty-cells: hide; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement