js可编辑表格

js可编辑表格_第1张图片
js可编辑表格_第2张图片


<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
        <script type="text/javascript" src="js/editable.js">script>
        <title>无标题文档title>
        <style type="text/css">
            table {
                text-align: center;
                border: 1px solid black;
                width: 508px;
                border-collapse: collapse;
            }

            tr th {
                background: pink;
            }

            p>span {
                display: inline-block;
                width: 50px;
                text-align: right;
            }
        style>
        <script type="application/javascript">
            $(function() {
                var str_1 = [{
                    "name": "放款笔数",
                    "id": "473982794",
                    "value": "我是zz"
                }, {
                    "name": "banner地址",
                    "id": "78943294",
                    "value": "http://www.baidu.com"
                }, {
                    "name": "这是哪个三",
                    "id": "129787",
                    "value": "我是zz"
                }, {
                    "name": "我了很多很多",
                    "id": "123455",
                    "value": "http://www.sain.com"
                }];
                show(str_1);

                function show(str_1) {
                    for (var i = 0; i < str_1.length; i++) {
                        $('tbody').append('' + str_1[i].name + '' + str_1[i].value + '编辑 保存');
                    }
                }

                $('tbody').on('click', '.bj', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var num1 = num.find('td:eq(0)').text();
                    var num2 = num.find('td:eq(1)').text();
                    num.find('td:eq(0)').text('').append(' ' " />');
                    num.find('td:eq(1)').text('').append(' ' " />');;
                });
                $('tbody').on('click', '.save', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var val1 = num.find('input:eq(0)').val();
                    var val2 = num.find('input:eq(1)').val();
                    num.find('td:eq(0)').html('').remove("input").text(val1);
                    num.find('td:eq(1)').html('').remove("input").text(val2);
                });
            })
        script>
    head>

    <body>

        <table class="mytable" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th width="85">属性名th>
                    <th width="205">th>
                    <th width="105">操作th>
                tr>
            thead>
            <tbody>

            tbody>
        table>
    body>

html>

demo版:


<html>

    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>

        <title>无标题文档title>
        <style type="text/css">
            table {
                text-align: center;
                border: 1px solid black;
                width: 508px;
                border-collapse: collapse;
            }

            tr th {
                background: pink;
            }

            .sava {
                display: none;

            }

            p>span {
                display: inline-block;
                width: 50px;
                text-align: right;
            }
        style>
        <script type="application/javascript">
            $(function() {





                var str_1 = [{
                    "name": "放款笔数",
                    "id": "473982794",
                    "value": "我是zz"
                }, {
                    "name": "banner地址",
                    "id": "78943294",
                    "value": "http://www.baidu.com"
                }, {
                    "name": "这是哪个三",
                    "id": "129787",
                    "value": "我是zz"
                }, {
                    "name": "我了很多很多",
                    "id": "123455",
                    "value": "http://www.sain.com"
                }];
                show(str_1);

                function show(str_1) {
                    for (var i = 0; i < str_1.length; i++) {
                        $('tbody').append(''">' + str_1[i].name + '' + str_1[i].value + '编辑保存 增加');
                    }
                }

                $('tbody').on('click', '#bj', function() {
                    $(this).hide().next('.sava').show();
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var num1 = num.find('td:eq(0)').text().trim();;
                    var num2 = num.find('td:eq(1)').text().trim();;
                    num.find('td:eq(0)').html('').append(' '" />');
                    num.find('td:eq(1)').html('').append(' '" />');
                });
                $('tbody').on('click', '#sava', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var val1 = num.find('input:eq(0)').val().trim();;
                    var val2 = num.find('input:eq(1)').val().trim();;
                    num.find('td:eq(0)').html('').remove("input").text(val1);
                    num.find('td:eq(1)').html('').remove("input").text(val2);
                    $(this).hide().prev('.bj').show();

                });
                $('tbody').on('click', '.add', function() {
                    $('tbody').append('保存 增加');
                });
            });
        script>
    head>

    <body>

        <table class="mytable" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th width="205">属性名th>
                    <th width="205">th>
                    <th width="305">操作th>
                tr>
            thead>
            <tbody>

            tbody>
        table>
    body>

html>

你可能感兴趣的:(web前端学习)