利用“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;
10                var rows = table.find("tbody>tr");
11                var tableHtml = new Array();
12                for (var rowIndex = 0; rowIndex < rows.size(); rowIndex++) {
13                    tableHtml[rowIndex] = "<tr style='background-color:White;'><td width='40' style='padding:2px;'>" + (rowIndex + 1) + "</td>";
14                    var cells = (rows.eq(rowIndex)).children("td");
15                    var cellsHtml = new Array();
16                    for (var columnIndex = 0; columnIndex < cells.size(); columnIndex++) {
17                        cellsHtml[columnIndex] = "<td style='padding:2px;'>";
18                        cellsHtml[columnIndex] += cells.eq(columnIndex).text();
19                        cellsHtml[columnIndex] += "</td>";
20                    }
21                    tableHtml[rowIndex] += cellsHtml.join("");
22                    tableHtml[rowIndex] += "</tr>";
23                }
24                panel.html("");
25                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>");
26            }
27        }
28         $( function ()  {
29            $("DIV#GridHolder").css("border", "1px solid #7F9DB9").css("padding", "15px").attr("contentEditable", true).blur(function() { formatTable(this); });
30
31            $("#test").click(function() {
32                $("DIV#GridHolder tr").each(function() {
33                     //获取一行数据
34                    var tr = $(this);
35                     //这里仅改变数据的颜色。在实际项目中可以进行数据的完整性校验，然后集中提交或者逐行提交。
36                    tr.css("color", "red");
37                });
38            });
39        } );
40      < / script>
41 < p > 粘贴数据，进行测试： < / p>
42      < input type = " button "  value = " 保存 "  id = " test "   / >
43      < div id = " GridHolder " >< / div>
44

转载于:https://www.cnblogs.com/assembly/archive/2009/02/23/1396422.html