添加按钮 table增加一行删减按钮 table去掉一行

最新推荐文章于 2024-06-01 23:43:18 发布

weixin_34138056

最新推荐文章于 2024-06-01 23:43:18 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuchao0506/p/9558958.html

该博客围绕一个AA新增功能展开，此功能可添加内容，默认展示一行列表。解决思路是页面先展示表头和一行列表，通过设置按钮的onclick函数动态拼接或删除表格行。代码实现了添加和删减按钮的功能，项目运行后可在页面动态操作。过程虽不难但耗时。

需求描述：做的一个AA新增功能，同时可以为这个即将新增的AA添加内容，而且AA的内容默认展示一行列表，点击添加按钮后出现下一行列表

解决思路：页面首先展示一个表头和列表的一行，作为默认展示的一行列表，然后对增加按钮设置onclick，在onclick函数中动态的为table拼接<tr><td>；删除行，直接调用分装好的删除table一行的函数就行，其实这个函数我当时就试了好嗷嗷嗷多遍，终于ok了，老规矩废话不多，直接上代码：

代码：html的代码table的按钮的那个就不贴了，就是对button加个onclick就行

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table1">
    <thead>
    <tr>
        <th>选项</th>
        <th>值</th>
        <th>排序</th>
    </tr>
    </thead>
    <tbody id="tbdy">
    <tr>
        <td><input type="text" name="names" id="names"/></td>
        <td><input type="text" name="values" id="values"/></td>
        <td><input type="text" name="sorts" id="sorts"/></td>
    </tr>
    </tbody>
</table>

页面展示：

代码：添加按钮的onclick函数和删减按钮的onclick函数实现添加行和删减行的效果

addRowBut = function(){//添加按钮的
var str = '<tr><td><input type="text" name="names" id="names" />' + '</td><td><input type="text" name="values" id="values"/>' + '</td><td><input type="text" name="sorts" id="sorts" />' + '</td>' + '</tr>';
$("#table1").append(str);
}

cutRowBut = function (){//删减按钮的
    var i= $("#table1 tr").length;//获取整个table的<tr>的个数 这个数包含了表头 恰当地说 是table的<tr>个数在加上一个<th> 
    if(i>2){//大于2  是因为要保留表头和表的第一行默认行
        $("#table1 tr:last").remove();//js(也不知道还是jQ)反正就是封装好的删除 行 的方法了  这里要注意的是 那个last,表示从最后一行开始删。
　　　　　　　　　　　　　　　　　　　　　//你们可以试试改变这个last,他会提示很多值first等等一大坨，我还试过first,在这里也一并说明了，就是从表的第一行开始删除，如果没有上面的if判断，直接运行这行删除代码，那就是先删除表头，再删除表的第一行，反正就是从头开始删就行了！！！
    }
}

说明：这两个函数就是实现上边的添加删减按钮的项目跑起来后去页面点击就可以动态添加行或者删减行了

总结：刚拿到这个需求的时候，心里有点小懵逼，没做过，但是觉得还有点意思，就想着这个该怎么做，实际敲代码的过程中也是各种小问题。讲真这个真的不是特别难，就是特别耗时间。

转载于:https://www.cnblogs.com/xuchao0506/p/9558958.html