Q:

Add and Delete Rows Dynamically using jQuery

I am creating add and delete rows dynamically but it seems that my code is not working properly please help me. As i'm unable to get alert as i m trying to append table rows but before that it will check wheather table exist or not than add row
$(document).ready(function()
{
    $("#add_Row").click(function()
    {
        if($(".test").html() == null)
        {
            alert("empty");         
         $("#add_Row").click(function()
          {
              alert("I am here");
            $('.test').append(
            "<tr><td><input type="text"     class="index_txtBox"/></td>
                 <td><input type="checkbox" class="check_box"/></td> 
                 <td><input type="text"     class="txt_Box"/></td>
                 <td><select><option></option></select></td></tr>
            ");             
          });   

          $("#delete_Row").click(function()
          {
              if($(".test tr").length != 0)
              {               
                  $(".test tr:last-child").remove();
              }
              else
              {
                  alert("Now table is empty");
              }
          }
        }
    });     
});
</script>
</head>
<body>
<div class="buttons">
<input type="button"   id="add_Row"    value="Add Row" />
<input type="button"   id="delete_Row" value="Delete Row" />
<input type="checkbox" id="select_All" value="Select All" />Select All

</div>

A:

First of you are trying to append a invalid string. Your string should not have breaks between them (you can escape them using \), instead have your string within one line. And use single quotes to surround the entire string and double quotes around other HTML attributes or you can have it the other way around. 
Something like this:
var text= "<tr><td><input type='text''     class='index_txtBox'/></td>"
                 +"<td><input type='checkbox' class='check_box'/></td>" 
                 +"<td><input type='text'     class='txt_Box'/></td>"
                 +"<td><select><option></option></select></td></tr>";

Now, for the add button:
$(document).on('click', '#add_row', function(){
  $('#test').append(text) //append the var defined
});

And then the delete button, delete the rows that are checked:
$(document).on('click', '#del_row', function(){
if(!$.trim($('#test').html()).length){ // If empty, do a  alert
  alert ("Now table is empty")
 }else{
   $('#test').children('tr').find('input[type=checkbox]:checked').each(function () { // look for the checked input
    $(this).closest('tr').remove(); // remove the entire row closest to it
    });
  }
});

Here is a Demo.

