利用“contentEditable” + jQuery 批量更新数据

     最近在项目中碰到这样的一种需求：通过Web 界面将Excel（Word/网页）中的二维表格数据保存到数据库中。方法当然有很多，这里给出我的一种解决方案：通过Copy -> Paste -> 保存；供大家拍砖。

复制/粘贴数据，进行测试(代码在IE6、Firefox 3.06中测试通过)：

1	2	3	4	5	6	7
test1	test2	test3	test4	test5	test6	test7
测试1	测试2	测试3	测试4	测试5	测试6	测试7
ok1	ok2	ok3	ok4	ok5	ok6	ok7
aa	bb	cc	dd	ee	ff	gg

这里仅改变表格内文字的颜色，在实际项目中可以灵活运用。

 

 

 1<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 2<script language="javascript" type="text/javascript">
 3         //对表格进行重新格式化
 4        function formatTable(target) {
 5            var panel = $(target);
 6            if (panel.children("table").size() == 1) {
 7                var table = panel.children("table:first");
 8                if (table.attr("formatted")=='true')
 9                    return;
                var rows = table.find("tbody>tr");
                var tableHtml = new Array();
                for (var rowIndex = 0; rowIndex < rows.size(); rowIndex++) {
                    tableHtml[rowIndex] = "<tr style='background-color:White;'><td width='40' style='padding:2px;'>" + (rowIndex + 1) + "</td>";
                    var cells = (rows.eq(rowIndex)).children("td");
                    var cellsHtml = new Array();
                    for (var columnIndex = 0; columnIndex < cells.size(); columnIndex++) {
                        cellsHtml[columnIndex] = "<td style='padding:2px;'>";
                        cellsHtml[columnIndex] += cells.eq(columnIndex).text();
                        cellsHtml[columnIndex] += "</td>";
                    }
                    tableHtml[rowIndex] += cellsHtml.join("");
                    tableHtml[rowIndex] += "</tr>";
                }
                panel.html("");
                panel.html("<table formatted='true' cellspacing='1' cellpadding='0' style='background-color:#ECE9D8; font-size:12px; font-family: Tahoma,Verdana,\'宋体\''><tbody>" + tableHtml.join("") + "</tbody></table>");
            }
        }
        $(function() {
            $("DIV#GridHolder").css("border", "1px solid #7F9DB9").css("padding", "15px").attr("contentEditable", true).blur(function() { formatTable(this); });

            $("#test").click(function() {
                $("DIV#GridHolder tr").each(function() {
                     //获取一行数据
                    var tr = $(this);
                     //这里仅改变数据的颜色。在实际项目中可以进行数据的完整性校验，然后集中提交或者逐行提交。
                    tr.css("color", "red");
                });
            });
        });
    </script>
<p>粘贴数据，进行测试：</p>
    <input type="button" value="保存" id="test" />
    <div id="GridHolder"></div>