jQuery动态添加内容

最新推荐文章于 2023-11-23 15:54:51 发布

Williamoses

最新推荐文章于 2023-11-23 15:54:51 发布

阅读量491

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/moses_binson/article/details/102540241

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格添加行列</title>
</head>
<body>
<table>
    <tbody id="test">
    </tbody>
</table>
<table style="display: none;">
    <tbody id="modo">
    <tr>

    </tr>
    </tbody>
</table>
<button id="add_row">添加行</button>
<button id="add_col">添加列</button>
<button id="get_str">提取str</button>
<input type="text" id="dele_row_text" /><button id="dele_row">删除行</button>
<input type="text" id="dele_col_text" /><button id="dele_col">删除列</button>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $("#add_row").click(add_row)
    $("#add_col").click(add_col)
    $("#get_str").click(get_str)
    $("#dele_row").click(dele_row)
    $("#dele_col").click(dele_col)

    function add_row() { //添加行方法
        var mode_tr = $("#modo tr:first").clone();

        $("#test").append(mode_tr);

        f5_click()
    }

    function add_col() { //添加列方法
        var tr = $("tr"); //所有tr元素
        $("tr").each(function(index) {
            var td = $("<td>William</td>").addClass("td_up");
            $(this).append(td)
        })

        f5_click()
    }

    function get_str() { //提取内容
        var str="";
        var trLen = $("#test tr").length;
        for(var i = 0;i<trLen;i++){
            var tr = $("#test").find("tr").eq(i);//获取每一行tr
            var tdLen = $(tr).find("td").length;
            for(var j = 0;j<tdLen;j++){
                td=$(tr).find("td").eq(j);//获取每行td
                str = str+$(td).text()+","
            }
            str = str+"|"//换行
        }
        return str;
    }

    function dele_row() {
        var row = $("#dele_row_text").val();
        row = row - 1;
        var tr = $("#test tr:eq(" + row + ")");

        if(!confirm("确定要删除" + $(tr).find("td").eq(0).text() + "这一行？")) {
            return false
        }

        $(tr).remove();
    }

    function dele_col() {
        var col = $("#dele_col_text").val();
        col = col - 1;
        var tr = $("tr");
        $.each(tr, function(index) {
            if(index == 0) {
                if(confirm("确定要删除" + $(this).find("td").eq(col).text() + "这一列？") == 0) {
                    return false;
                }
            }
            $(this).find("td").eq(col).remove()
        });

    }

    function f5_click() {
        $(".td_up").bind('click', function() {
            $(this).text("jQuery")
        })
    }
</script>
</body>
</html>

Williamoses

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态添加内容

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表格添加行列</title></head><body><table> <tbody id="test"> </t...
复制链接

扫一扫