Есть такой код, он делает столбцы равным строкам, но не делает строки равными столбцами(надеюсь правильно я разъяснился ). Помогите как это сделать.
<!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>
