动态生成表格

<table id="optionContainer">
                     <tr id="option1">
                         <td><input type="text" class="form-control" placeholder="商品编号" style="margin-right:30px"></td>
                         <td><input type="text" class="form-control" placeholder="商品名称" style="margin-right:30px"></td>
                         <td><input type="text" class="form-control" placeholder="商品数量" style="margin-right:30px"></td>
                         <td><input type="text" class="form-control" placeholder="商品单价" style="margin-right:30px"></td>
                         <td><input type="button" value="添加" οnclick="add()"></td>
                         <!-- <td><input type="button" value="删除" οnclick="dele()"></td> -->
                     </tr>                   

    </table>

<script type="text/javascript">
    var rowCount=1;
    
    function add(){
      rowCount++;  
      var newRow='<tr id="option'+rowCount+'">'+
                   '<td><input type="text" class="form-control" placeholder="商品编号" style="margin-right:30px"></td>'+
                  '<td><input type="text" class="form-control" placeholder="商品名称" style="margin-right:30px"></td>'+
                  '<td><input type="text" class="form-control" placeholder="商品数量" style="margin-right:30px"></td>'+
                  '<td><input type="text" class="form-control" placeholder="商品单价" style="margin-right:30px"></td>'+
                  '<td><input type="button" value="添加" οnclick="add()"></td>'+
                  '<td><input type="button" value="删除" οnclick="dele(rowCount)"></td>';
     $('#optionContainer').append(newRow);  
    }
    
    function dele(rowIndex){
          $("#option"+rowIndex).remove();  
               rowCount--;    
    }
</script>