Динамическая таблица

    <div id="table_wrapper">
    <table id="my_table">
      <tr>
        <td></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <span id="add_date">+</span>
    <span id="add_row">+</span>
</div>
     
<script type="text/javascript">
 
            var tbl = document.getElementById('my_table'),
                trs = tbl.getElementsByTagName('tr'),
                cnt = trs.length;
 
            document.getElementById('add_date').onclick = function(){
                var i = 0;
                for(i; i < cnt; i++){
                    var c = i > 1 ? 3 : 2,
                        x = trs[i].insertCell(c);
                    x.innerHTML='&nbsp';
                }
            }; 
        </script>

<script type="text/javascript">
var d = document;
var last_id = 0;
function add_value_f() {
     
    var tbody = d.getElementById('my_table');
     
    var row = d.createElement("tr");
    tbody.appendChild(row);
 
    var td1 = d.createElement("td");
    var td2 = d.createElement("td");
    var td3 = d.createElement("td");
 
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
     
    last_id = last_id + 1;
    td1.innerHTML = '<input type="text" name="xml_id['+last_id+']">';
    td2.innerHTML = '<input type="text" name="values['+last_id+']">';
    td3.innerHTML = '<input type="text" name="val_sort['+last_id+']">';
}
 
</script>
<table border="1" id="my_table">
<tr>
    <td><input type="text" name="xml_id[0]"></td>
    <td><input type="text" name="values[0]"></td>
    <td><input type="text" name="val_sort[0]"></td>
</tr>
</table>
<input type="button" onclick="add_value_f()" value="Добавить поле"/>

<style>
a {display: inline-block; margin: 23px; color: teal}
table {margin: 23px; border-collapse: collapse}
input {width: 54px; margin: 0; border: none; width: 100%}
</style>
 
<a href="javascript: addROW ()">добавить строку в конец таблицы</a>
<a href="javascript: remROW ()" style="color:red">удалить нижнюю строку</a>
<hr align="left" noshade size="0" width="35%">
<a href="javascript:addCOL ()">добавить столбец справа</a>
<a href="javascript:remCOL ()" style="color:red">удалить крайний правый столбец</a>
 
 
<table id="tbl" cellspacing="0" cellpadding="0" border>
<tr><td><input name="n0_0"></td><td><input name="n0_1"></td><td><input name="n0_2"></td></tr>
<tr><td><input name="n1_0"></td><td><input name="n1_1"></td><td><input name="n1_2"></td></tr>
<tr><td><input name="n2_0"></td><td><input name="n2_1"></td><td><input name="n2_2"></td></tr>
</table>
 
<script>
function addROW ()
{
var T = document.getElementById ('tbl');
var ro = T.insertRow (-1);
for (var j = 0, J = T.rows [0].cells.length; j < J; j++)
   {
   var inp = document.createElement ('input');
   inp.name = inp.value = 'n' + (T.rows.length - 1) +'_' + j;
   var ce = ro.insertCell (-1)
   ce.appendChild (inp);
   }
}
 
function remROW ()
{
var T = document.getElementById ('tbl';
if (T.rows.length < 2) {alert ('В таблице должна остаться хотя бы одна строка. Команда отменена.'); return}
T.deleteRow (T.rows.length - 1);
}
 
function addCOL ()
{
var T = document.getElementById ('tbl');
for (var j = 0, J = T.rows.length; j < J; j++)
   {
   var inp = document.createElement ('input');
   inp.name = inp.value = 'n' + j +'_' + T.rows [j].cells.length;
   var ce = T.rows [j].insertCell (-1)
   ce.appendChild (inp);
   }
}
 
function remCOL ()
{
var T = document.getElementById ('tbl');
if (T.rows [0].cells.length < 2) {alert ('В таблице должен остаться хотя бы один столбец. Команда отменена.'); return}
for (var j = 0, J = T.rows.length; j < J; j++) {var ceL = T.rows [j].cells.length; if (ceL > 1) T.rows [j].deleteCell (ceL - 1)}
}
</script>