js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）

实际运用的过程中是不会重新写的，这里只是练练手！是我以前的一个面试题目！

var row0 = document.getElementByID("tableID").insertRow(-1);//tableID--该table的ID；-1表示是在该行的下面插入一行；
var cell = row0.insertCell(-1);//增加一个td
cell.innerHTML = "<td><strong>姓名:</strong></td>";//设置td的内容
cell.align = "right";//td的属性
row0.insertCell(-1).innerHTML = "<td><label><input type=\"text\" id=\"\" size=\"25\"></label></td>";//下一个td

可以这样不断的加
最后就形成了一个table了


至于删除的话document.getElementByID("tableID").deleteRow(1)就可以了，这是删除第二行。

以前公司做设计的时候就是用TABLE来实现，合并，增加，删除，但是列移动没有实现，维护起来麻烦死了，后来用的DATAGGRID,和三方的GRID，楼主也找找看吧

大概实现了一下合并单元格, 没实现合并已经被合并的单元格

增加行
$(Grid + ' tbody tr:first-child').clone().appendTo(Grid + ' tbody');

var $ = jQuery;
var TBar = {
crt : function() {
var row = $('#row').val();
var col = $('#col').val();
$('#info table').remove();
var table = $("<table class='datalist form' cellspacing='0'></table>");
while (row-- > 0) {
var tr = $("<tr></tr>");
var num = col;
while (num-- > 0) {
tr.append("<td></td>");
}
table.append(tr);
}
$('#info').append(table);
App.initTd();
},
addRow : function() {

var tr = $('#info table tr:last').clone();
tr.find("td").html("");
App.initTd(tr.find("td"));
$('#info table').append(tr);
},
addCol : function() {
$('#info table tr').append(App.initTd($("<td></td>")));
},

delRow : function() {
var elIds = [];
$(".hit").parent().children().each(function() {
elIds[elIds.length] = $(this).children().attr("elid");
});

// FIXME 合理的不?
$.ajax({

    url:'/c/wkf/delFormElement',
                type:'post',
                data:{elIds:elIds.join(",")},
                dataType:'json',
                success:function(rst){
                    if(rst.success===true){
                        $('.hit').parent().remove();
                        //更新模板
                        var tpl = TBar.getLayOut();
                        var formId = $('#formId').val();
                        updateFormTpl(formId, tpl);
                    }else{
                        alert('删除行失败');
                    }
                }
               
});

},
delCol : function() {
var elIds = [];
$(".hit").each(function() {
elIds[elIds.length] = $(this).children().attr("elid");
});

// FIXME 合理的不?
$.ajax({

    url:'/c/wkf/delFormElement',
                type:'post',
                data:{elIds:elIds.join(",")},
                dataType:'json',
                success:function(rst){
                    if(rst.success===true){
                        $('.hit').remove();
                        //更新模板
                        var tpl = TBar.getLayOut();
                        var formId = $('#formId').val();
                        updateFormTpl(formId, tpl);
                    }else{
                        alert('删除行失败');
                    }
                }
               
});
},
clear : function() {
$('.hit').text("");

},
merge : function() {
var num = $('.hit').length;
if (num < 2) {
alert("请至少选择两个单元格!");
} else {
var first = $('.hit:first');
var last = $('.hit:last');

var lFirst = first.attr('offsetLeft');
var lLast = last.attr('offsetLeft');

var First = first.attr('offsetTop');
var tLast = last.attr('offsetTop');

var diffX = lLast - lFirst;
var diffY = tLast - First;
var cfg = false;
if (diffX == 0) {
cfg = {
offert : 'offsetLeft',
len : lFirst,
span : 'rowSpan'
};
}
if (diffY == 0) {
cfg = {
offert : 'offsetTop',
len : First,
span : 'colSpan'
};
}

if (cfg) {
var flag = true;
if (num > 2) {
$('.hit').each(function() {
var offert = $(this).attr(cfg.offert);
if (offert != cfg.len) {
return flag = false;
}
return flag = true;
});
}
if (flag) {
$('.hit').not(first).remove();
first.attr(cfg.span, num);
} else {
alert("请选择相邻的单元格!");
}
}
}
},
getLayOut : function() {

var tb = $('#info').clone();

tb.find('td').removeClass("hit").each(function() {
var el = $('.el', this).attr('el');
if (el) {
$(this).text("${" + el + "}")
} else {
$(this).text("")
}
});
var layout = tb.html().replace(/ jQuery\d*="null"/g, '');
return layout;

}
}

请看merge 里头的操作。

你所写的东西网上已经有源代码了？去找找看，操作单元格！~ 你所说的所有功能都有 ....

我们现在的项目也有这个功能是挺恶心的

本人最近也在做一个在线编辑器中画table功能，比楼主的复杂得多。
比如在经过多次拆分合并后的一个单元格中 再次进行增删功能

现在剩下 选择多个单元格合并未实现

封装啊 封装 楼主代码需要封装啊