Javascript-форум - Помогите с вопросом

Есть такой код, он делает столбцы равным строкам, но не делает строки равными столбцами(надеюсь правильно я разъяснился ). Помогите как это сделать.

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

<style>
#my_table {

}
#my_table td {
border: 10px solid #333;
width: 30px;
}

input{

margin-top: 200px;
}

</style>

<table id="my_table">

<tr>

<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>
<input type="button" id="add_col" value="+">
<input type="button" id="add_col1" value="+">
<input type="button" id="add_col2" value="+" >

<script type="text/javascript">
var tbl = document.getElementById('my_table'),
trs = tbl.getElementsByTagName('tr');

document.getElementById('add_col').onclick = function(){

for(var i=0; i < trs.length; i++){

x = trs[i].insertCell(-1);

}

};

var tbl1 = document.getElementById('my_table'),
trs1 = tbl1.getElementsByTagName('tr'),
cnt1 = trs1.length;

document.getElementById('add_col1').onclick = function(){
var i = 0;
for(i; i < trs.length; i++){

x = trs1[i].deleteCell(-1);

}

};

function add() {
var tr=document.getElementById('my_table').insertRow(-1);
trs2 = tr.getElementsByTagName('td'),

cnt2 = trs.length;

for (var i=0; i<trs.length; i++) {

td=tr.insertCell(0);
td.innerHTML=1;

};

};

</script>

<button onclick='add();'>Add</button>

</body>
</html>