纯javascript/jquery 实现表格的动态增删改

一、为什么要用javascript/jquery 实现表格的动态增加删除？

       1、跨平台：javascript/jquery 是属于浏览器脚本语言，不受后台服务器的编程语言限制，不管你是用.net技术还是java ，或者是C/C++，都可以是去使用javascript做特效。

      2、动态性：javaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

     3、减少服务器负载：不需要频繁的和服务器进行交互，页面可以进将数据处理好在进行统一提交，大大的减少服务端的负载。

二、需要实现的效果是怎样的？

     1、当信息在表单中或者输入框中输入完毕的时候，将表单或输入框中的数据加载到表格中，也就是增加一行表格的信息。

    2、点击删除按钮或者超链接的时候，将指定的一行删除。

    3、点击保存按钮的时候，将表格中存在的数据获取到并发送到服务端。

三、如何实现？

      1、知识准备：

           on() 方法的使用：请参照：http://www.w3cschool.cc/jquery/event-on.html  利用on()对未来元素添加事件的处理程序，动态增加表格的一行。

        append():请参照http://www.w3cschool.cc/jquery/html-append.html 你用append()对表格增加子元素。

      

    2、开始实现：

      首先：肯定要一个表格:table

      

    需要一个触发事件的按钮：

    页面的表格和输入框就搞定了，现在我们看看如何用javascript/jquery来处理页面：

单价保存的按钮，触发一个addsale()方法。具体如下：

 

    基本就是获取input的值，再将值放到一个数组里面，便于传输。按照增加的流程，现在的数据是没有序号的，我们应该走addtable(shop)这一步：

仅仅是绘制了一下行，用append()将写好的html代码添加到表格下面。这里要注意：在写html代码的时候，原先要双引号的要改成单引号。此时我们已经完成了对表格一行的增加。每一行后面都有两个标签，对应这编辑，也就是更改和删除的操作。

下面我们来实现这两个操作：

 1、编辑：点击编辑应该能够获取到该行的所有数据，并且将数据加载到输入框中便于修改和操作。

       获取点击行的数据：

这里要说明一下：单独的使用$().each()来遍历表格的数据是不行的，因为表格的数据是在页面已经加载完成后，通过append()添加上去的。$().each()无法遍历到的。这里我们就要用on()对未来元素做一个事件绑定。我们拿到每一行的数据，将可以将各个数据放到对应的输入框里了。在执行保存就有可以完成修改的操作。这里就不贴代码了。

接下来讲删除这个操作：

    我的思路是：

table.deleteRow(row);这里的话你要取到需要删除行的行号，row。既然上面都已经能够取到一行的所有数据，当然也可以取到行号：这样我们就可以完成了：

         

其实这个方法和修改的方法一摸一样就是触发的类不同，个人感觉这个并不是很好用，但在这种思路下也只能这样了。欢迎指正。

然后就执行deleteRow()就行了。这里在删除一行之后，它以下行的序号不会随着删除一行而发生变化，就写了一个循环将剩下行的序号全部减一。这个处理自己觉得还是不好。

但总算将增删改全部实现了。后面的优化在慢慢弄了。

最后还要获取表格的所有数据，看图：

这里的就是循环每行每列读取数据，处理还是比较粗糙了感觉。

欢迎指正！