技术反思，关于动态操作表格

最新推荐文章于 2022-04-13 15:08:41 发布

nn_nana

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/nn_nana/article/details/52796357

版权

闲来无事，照着runjs里面别人写的代码写了一个表格操作，才发现，自己有多蠢；

最基本的东西几天不写就脑子蒙圈了，一个简单的代码折腾了那么久，深感惭愧；

效果如下：

因为想要练手js，所以没有在样式上下太大的功夫：

html代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
   </head>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       table{
           width: 500px;
           text-align: center;
           border:1px solid #000;
           margin-top: 20px;
           margin-left: 200px;
       }
       tr{
           height: 30px;
           border: 1px solid red;

       }
       button{
           width: 50px;
           height: 30px;
           margin-top: 5px;
       }
       .zeng{
           width: 100px;
           height: 30px;
           margin-left: 200px;
           margin-top: 10px;
       }
       td{
           text-align: center;
       }
       .sav{

           float: left;
       }
       .canc{

           float: left;
       }
   </style>
   <body>
       <table id="tab">
           <caption>边框表格布局</caption>
           <thead>
               <th>名称</th>
               <th>城市</th>
               <th>密码</th>
               <th>操作</th>
           </thead>
           <tr>
               <td>a</td>
               <td>北京</td>
               <td>123</td>
               <td><button class="chang">修改</button>

               </td>
               <td><button class="del">删除</button></td>
           </tr>
           <tr>
               <td>b</td>
               <td>天津</td>
               <td>123</td>
               <td><button class="chang" id="chang">修改</button>

               </td>
               <td><button class="del">删除</button></td>
           </tr>
           <tr>
               <td>c</td>
               <td>上海</td>
               <td>123</td>
               <td><button class="chang">修改</button>

               </td>
               <td><button class="del">删除</button></td>
           </tr>

       </table>
       <button class="zeng" id="zeng">增加</button>
   </body>

</html>

引入了一个外部的/jquery

下面是js的代码：

短短100行不到的代码，看似如此简单，没想到却是出了很多的问题的，

下面是问题总结：

1，

这里有一个on方法的绑定，最开始写的时候没有太过留意，引入的是jquery1.3.2.min.js，结果莫名的报错说

....on.....不是一个函数，后来发现原因，on方法在jquery1.7以上版本才支持，所以，吸取经验教训，以后引入

的jquery一定是比较高的版本；

2，

jquery的元素追加

上面是来自w3cschool的方法，这里存在一个append与after的区别，以及prepend与before的区别；

http://blog.csdn.net/ljyabc1028/article/details/7341665

这里有一篇别人的博客讲的很清楚，就是prepend是添加在你所选元素的里面的内容的前面，而before

则是添加到你所选的元素的前面，在这个标签的前面，同理，prepend是添加到你所选的元素的里面的内容的

后面，而after则是添加到你所选的元素的后面，是在该标签的外面，

另外存在一个appendTo，是把被选中的元素放到后面，把需要添加的内容放到前面，同样的，这个也是添加到元素

的内部内容的后面；

3，

jquery中判断是否含有class的属性；

4，

事件的绑定，之前看博客时候记得别人写，点击事件什么的，一定要写在js里面，或者用委托来写，不能再html里面添加

这一点非常受用：

（1）

（2）

这里有别人写的关于事件委托的好处

http://www.cnblogs.com/leejersey/p/3801452.html

5，

关于整行的删除；

remove方法行不通，这里存在着自己看不懂的地方，后来改用方法：

点击当前行内的一个button，删除他所在的行，道理不是很懂，先把方法记录下来；

就是沿着dom树指导找到与选择器内匹配的为止；

http://www.w3school.com.cn/jquery/traversing_closest.asp

6，

添加class；

在html（）里面可以直接写入内容，相当于js里面的innerhtml；

7，

另外有一个解释不通的地方；就是我的文件中明明没有引入bootstrap，但是bootstrap的组件却生效了，

即取消按钮上面的btn off，暂时还没有查到原因，但是知道以后写取消按钮可以这么用了

总觉到此为止，但是思想上却还是要反思，一天不写就手生这话是真的，只有敲了才能发现问题，每天200行走起

nn_nana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
技术反思，关于动态操作表格

闲来无事，照着runjs里面别人写的代码写了一个表格操作，才发现，自己有多蠢；最基本的东西几天不写就脑子蒙圈了，一个简单的代码折腾了那么久，深感惭愧；效果如下：因为想要练手js，所以没有在样式上下太大的功夫：html代码如下： *{
复制链接

扫一扫