您的位置：首页 > Web前端 > JavaScript

js可编辑表格

2016-07-05 09:30 387 查看 




<!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> </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> </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> </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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航