Add or decrease columns and rows in the table

Question

I have a table where I want to add or decrease new rows and columns, through the button click event, I tried this way, as the code below, but it’s not working very well: This example of how it should look when clicking on more it add one more column or row.

$(document).ready(function(){

    $("tbody td:not(.sub)").hide();

    $(".img1").click(function(){
        if ($(this).attr("src") == "img/icones/menos.png"){
        $(this).attr("src","img/icones/mais.png")
        .parent().siblings("td").hide();
        } else{
            $(this).attr("src","img/icones/menos.png")
        .parent().siblings("td").show();
        }
    });
});

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table width="683" border="1">
<tbody>
  <tr>
    <td class="sub" width="160" rowspan="2">DESPESAS</td>
    <td class="sub" width="109" align="right">DIA</td>
    <td class="sub" width="129" align="center"><label>
      <input type="text" name="" id="" class="txt"/>
    </label></td>
   <td width="129" align="center" >1</td>
    <td class="sub" width="17" rowspan="5" align="center"><img class="img1" src="img/icones/mais.png" width="17" height="17"  alt=""/>
    </td>
    <td class="sub" width="99" rowspan="2" align="center"><p>TOTAL PERIODO</p></td>
  </tr>
  <tr>
    <td class="sub" align="right">DATA</td>
    <td class="sub" align="center"><input type="text" name="input" id="input" class="txt"/></td>
    <td align="center">2</td>
  </tr>
  <tr>
    <td class="sub" colspan="2">Refeicao</td>
    <td class="sub" align="right"><input type="text" name="input2" id="input2" class="txt"/></td>
    <td align="center">3</td>
    <td class="sub" align="right">200,60</td>
  </tr>
  <tr>
    <td class="sub" colspan="4" align="center"><img src="img/icones/mais.png" width="17" height="17"  alt=""/></td>
    <td class="sub" align="right">200,60</td>
  </tr>
  </tbody>
</table>
</form>