站长资源
中国站长网站

jquery表格的增删改查

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加表格及获取表格中数据-www.wangdahai.cn</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
table {
	border-collapse:collapse;
}
table,td,th {
	border:1px solid black;
}
</style>
</head>
<body>
<table id="table" width="70%" cellspacing="0" style="border: 1px solid">
    <thead>
        <tr>
            <th width="5%" style="text-align: center;"><input id="allCkb" type="checkbox"></th>
            <th width="45%" style="text-align: center">第一列</th>
            <th width="50%" style="text-align: center">第二列</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <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>
    </tbody>

</table>
<p align="right" style="margin-top: 10px;margin-right: 30px"><input type="button" class="btn-primary" onclick="addTr2('table', -1)" value="添加一行"> <input type="button" class="btn-default" onclick="delTr2()" value="删除一行"></p>
<p align="right" style="margin-top: 10px;margin-right: 30px"><input type="button" class="btn-primary" onclick="getTableData()" value="获取表格数据"></p>

<script>
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);
}

function delTr(ckb) {
    //获取选中的复选框,然后循环遍历删除
    var ckbs = $("input[name=" + ckb + "]:checked");
    if (ckbs.size() == 0) {
        alert("要删除指定行,需选中要删除的行!");
        return;
    }
    ckbs.each(function() {
        $(this).parent().parent().remove();
    });
}

/**
 * 全选
 *
 * 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');
}
//获取表格数据 ******************************************

function getTableData() {
    var arr = new Array();
    var trList = $("#tbody").children("tr");
    for (var i = 0; i < trList.length; i++) {
        var json = {};
        var tdArr = trList.eq(i).find("td");
        json.roiName = tdArr.eq(1).text();
        json.roiInfo = tdArr.eq(2).text();
        if (json.roiName == "" || json.roiInfo == "") {
            alert("预期ROI信息不能为空");
            return;
        } else {
            arr.push(json);
        }
        alert("第" + (i + 1) + "行第一列的值:" + json.roiName + ";  第" + (i + 1) + "行第二列的值:" + json.roiInfo);
    }
    return arr;
}
</script>

</body>
</html>

在线演示  
×

站长资源极速下载通道: jquery表格的增删改查

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » jquery表格的增删改查

评论 抢沙发

评论前必须登录!