html 问题，jsp页面， 实现功能， 按钮 点击 增加一行， 删除一行，增加一列，删除一列。js要写的很严谨。

Question

如题所述

Answer 1

行的操作比较简单，有现成的api
table.insertRow(index);
table.deleteRow(index);
列的操作比较麻烦，需要检索每一行，操作对应的单元格。追问

增删 行 是非常简单。 主要是想问 增加列 怎么写 唉·· 谢谢你 前台页面的知识 我该怎么学 能掌握的快 进步的快呢？

追答

帮你写了插入列，删除列了

表头1
表头2
表头3

内容1
内容2
内容3

内容1
内容2
内容3

内容1
内容2
内容3

添加列
删除列

.table{ border-collapse: collapse;}
.table th,.table td{ border: 1px solid #ccc; padding: 5px;}

//添加、删除列
var $table = $('#J_tb');
var tableOption = {
insertCol: function( oTable,index){
var cols = oTable.find('thead > tr').children().length;
var rows = oTable.find('tr');
if( index > cols){ //超出列数
alert( '超出列数');
return;
} else if( index == cols){
rows.each(function(i){
$(this).find('td').last().after('');
})
} else{
rows.each(function(i){
$(this).find('td').eq(index).before('');
})
}
},
deleteCol: function( oTable,index){
var cols = oTable.find('thead > tr').children().length;
if( index >= cols){ //超出列数
alert( '超出列数');
return;
}
var rows = oTable.find('tr');
rows.each(function(i){
$(this).find('td').eq(index).remove();
})
}
}

$('.btns').find('button').bind('click',function(e){
var inputs = $('.btns').find('input');
if( e.target.id == 'addCol'){
var inputValue = $(this).prev().val();
inputValue !== '' ? tableOption.insertCol($table,inputValue) : alert('填写列数');
} else{
var inputValue = $(this).prev().val();
inputValue !== '' ? tableOption.deleteCol($table,inputValue) : alert('填写列数');
}
})