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

时间：2024-01-01 11:38:15

需求描述：做的一个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>

页面展示：

添加按钮 table增加一行 删减按钮 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判断，直接运行这行删除代码，那就是先删除表头，再删除表的第一行，反正就是从头开始删就行了！！！
    }
}

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

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

相关文章