动态添加表格及获取表格中数据

Html

Css

	第一列	第二列

table {
	border-collapse:collapse;
}
table,td,th {
	border:1px solid black;
}

function addTr(table, row, trHtml) {
    //获取table最后一行 $("#table tr:last")
    //获取table第一行 $("#table tr").eq(0)
    //获取table倒数第二行 $("#tab tr").eq(-2)
    var $tr = $("#" + table + " tr").eq(row);
    if ($tr.size() == 0) {
        alert("指定的table id或行数不存在！");
        return;
    }
    $tr.after(trHtml);
}

/**
 * 全选
 *
 * allCkb 全选复选框的id
 * items 复选框的name
 */
function allCheck(allCkb, items) {
    $("#" + allCkb).click(function() {
        $('[name=' + items + ']:checkbox').attr("checked", this.checked);
    });
}

////////添加一行、删除一行测试方法///////
$(function() {
    //全选
    allCheck("allCkb", "ckb");
});

function addTr2(table, row) {
    var trHtml = "<tr><td style=\"text-align: center\"><input type='checkbox' name='ckb'/></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td></tr>";
    addTr(table, row, trHtml);
}

function delTr2() {
    delTr('ckb');
}
//获取表格数据 ******************************************

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

动态添加表格及获取表格中数据



代码描述：这是一个可以动态添加表格行以及获取表格中数据的小插件

此插件代码比较简单，大家可以参考下，如有其它问题可以联系：dba_master@163.com

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

zlyang

相关代码

动态添加表格及获取表格中数据

最新