js可编辑表格

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

<!DOCTYPE html>
<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('<tr><td>' + str_1[i].name + '</td><td>' + str_1[i].value + '</td><td><a href="#" class="bj">编辑</a><span>&nbsp;</span><a href="#" class="save">保存</a></td></tr>'); } } $('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(' <input type="text" value="' + num1 + ' " />'); num.find('td:eq(1)').text('').append(' <input type="text" value="' + num2 + ' " />');; }); $('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版:

<!DOCTYPE html>
<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('<tr opid="'+str_1[i].id+'"><td>' + str_1[i].name + '</td><td>' + str_1[i].value + '</td><td><a href="#" id="bj" class="bj">编辑</a><a href="#" id="sava" class="sava">保存</a><span>&nbsp;</span><a href="#" class="add">增加</a></td></tr>'); } } $('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(' <input type="text" value="'+num1+'" />'); num.find('td:eq(1)').html('').append(' <input type="text" value="'+num2+'" />'); }); $('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('<tr><td><input type="text" value=" "></td><td><input type="text" value=" "></td><td><a href="#" id="bj" class="bj" style="display: none">编辑</a><a href="#" id="sava" class="sava" style="display: inline-block">保存</a><span>&nbsp;</span><a href="#" class="add">增加</a></td></tr>'); }); }); </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>

你可能感兴趣的:(JavaScript)