动态添加删除表格的行:
- //动态添加一行
- function addRow() {
- var table = $("#sample");
- var tr = $("#sample tr").eq(0).clone(true);
- tr.find("input:eq(0)").val("");
- tr.find("input:eq(1)").val("");
- tr.appendTo(table);
- }
- //动态删除一行
- function deleteRow(obj) {
- var rowCount = $("#sample tr").size();
- if(rowCount == 1) {
- alert("至少保留一行");
- return;
- }
- $(obj).parent().parent().remove();
- }
- <table id="sample">
- <tr>
- <td><input type="text" name="input1"></td> <td><input type="text" name="input2"></td>
- <td><a href="#" onclick="return deleteRow(this);">删除</a></td>
- </tr>
- </table>
表格行的上移、下移
- //上移
- function moveUp(obj) {
- var rowCount = $("#sample tr").size();
- var curRow = $(obj).parent().parent().prevAll().length + 1; //获取当前行是第几行
- if (curRow == 1){
- alert("第一行不可以上移");
- } else {
- var curTr = $(obj).parent().parent();
- var preTr = curTr.prev(); //获取当前行的上一行
- var preTrpreTrClone = preTr.clone(true);
- curTr.after(preTrClone); //在curTr后插入一行
- preTr.remove();
- }
- }
- //下移
- function moveDown(obj) {
- var rowCount = $("#sample tr").size();
- var curRow = $(obj).parent().parent().prevAll().length + 1;
- var count = rowCount - curRow;
- if (count == 0) {
- alert("当前行不可以下移");
- } else {
- var curTr = $(obj).parent().parent();
- var nextTr = curTr.next(); //获取当前行的下一行
- var curTrcurTrClone = curTr.clone(true);
- nextTr.after(curTrClone);
- curTr.remove();
- }
- }
- <table id="sample">
- <tr>
- <td>aaa</td>
- <td>bbb</td>
- <td><a href='#' onclick='moveUp(this)'>上移</a> | <a href='#' onclick='moveDown(this)'>下移</a></td>
- </tr>
- <tr>
- <td>ccc</td>
- <td>ddd</td>
- <td><a href='#' onclick='moveUp(this)'>上移</a> | <a href='#' onclick='moveDown(this)'>下移</a></td>
- </tr>
- <tr>
- <td>eee</td>
- <td>fff</td>
- <td><a href='#' onclick='moveUp(this)'>上移</a> | <a href='#' onclick='moveDown(this)'>下移</a></td>
- </tr>
- </table>
转载于:https://blog.51cto.com/2342615/810209