新手问大家一个问题,table修改操作?在线等...

  要求:我有一个table表,表里的内容是从数据库取出来的,每行有一个button按钮,
       当我点击button按钮时候,能使该行变成可编辑,然后进行修改,并且能保存到数据库.
             谢谢大家我在线等......

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

css定义input框显示.js更改input框的显示,如;点button时可进行编辑.实现页面无刷新更改入库。
一个按钮即修改又保存，不能实现将修改的值保存到数据库
<input type="text" value='aaaa' id='test' onFocus="this.blur()">
<input type="button" value="修改" onclick="document.getElementById('test').onfocus = ''">
<input type="button" value="保存" onclick="save()">
点击修改前，文本框不可编辑，点击修改，可对此文本框进行编辑修改，修改完毕后可对其进行保存，可以通过JS直接保存，也可通过AJAX在PHP页面修改数据库
<html>
<head>
<title>window.scrollTo()函数</title>
<script laguage="javascript">
function test()
{
    document.getElementById('test1').onfocus = '';
    document.getElementById('test2').onfocus = ''
}
function save(){
    alert('此处写存储到数据库的代码');
}
</script>
</head>
<body>
<input type="text" value='aaaa' id='test1' onFocus="this.blur()">
<input type="text" value='aaaa' id='test2' onFocus="this.blur()">
<input type="button" value="修改" onclick="test()">
<input type="button" value="保存" onclick="save()">
</body>
</html>
直接运行，就可以看到效果，存到数据库的代码应该会吧
之前给你发过一个例子。你可以照着修改一下啊。
<style >
.input_tel {
border:0 none;
font-family:Arial;
font-weight:bold;
width:100px;
}
</style>
<script type="text/javascript">
function changeMobile(){
document.getElementById("owner_mobile").className = "textfield";
document.getElementById("owner_mobile").readOnly = false;
}</script><input class="input_tel" type="text" size="25" name="owner_mobile" id="owner_mobile" dataType="string" readonly="readonly" value="18712578952" />
<a href="javascript:changeMobile()" class="a_3ab7e7_11" title="修改" onclick="changeMobile()">
修改</a>
<a href="#" class="a_3ab7e7_11" title="保存" onclick="doSave()">
修改</a>其中dosave可以使用ajax或者jquery实现页面不刷新更新数据.
网上很多，搜索一下就有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以编辑的表格</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">$(function(){
//隔行换色
$("tbody tr:odd").css("background-color","#eee");

var numId = $("tbody td");
numId.click(function(){
var tdIns = $(this);
if ( tdIns.children("input").length>0 ){ return false; } var inputIns = $("<input type='text'/>"); //需要插入的输入框代码
var text = $(this).html(); inputIns.width(tdIns.width());//设置input与td宽度一致
inputIns.val(tdIns.html());//将本来单元格td内容copy到插入的文本框input中
tdIns.html("");//删除原来单元格td内容
inputIns.appendTo(tdIns).focus().select();//将需要插入的输入框代码插入dom节点中

inputIns.click(function(){ return false;});

//处理Enter和Esc事件
inputIns.keyup(function(event){
var keycode = event.which;

if( keycode == 13 ){ var inputText = $(this).val(); tdIns.html(inputText);}
if( keycode == 27 ){ tdIns.html(text);}
});
});
});
</script>
<style type="text/css">* { margin:0; padding:0;}
body { padding:10px; font:12px "微软雅黑", Geneva, sans-serif; color:#777;}
input { border:1px solid #ccc;  }table { width:240px; height:100px; margin:0 auto; border-collapse:collapse; }
td,th,caption { border:1px solid #ccc; padding:3px 10px; }
tbody td { width:100px; }
thead { background:#eee;}
caption { background:#ccc; color:#000; }</style>
</head><body>
<table>
<caption>可编辑的表格</caption>
<thead>
<tr>
<th>昵称</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>kily</td>
<td>music</td>
</tr>
<tr>
<td>牛bd牛</td>
<td>War3</td>
</tr>
<tr>
<td>keelii</td>
<td>web design</td>
</tr>
<tr>
<td>keelii</td>
<td>web design</td>
</tr>
<tr>
<td>keelii</td>
<td>web design</td>
</tr>
</tbody>
</table></body>
</html>
<style>
.hide{ display:none;}
#content{ border:1px solid #ddd;}
</style><div id="content">
<span id="output">aaa</span>
<input type="text" id="input" class="hide" value="aaa" />
</div>$(document).ready(function() {
$('#content').click(function() {
var out = $(this).find('#output');
var ind = $(this).find('#input');
ind.removeClass('hide');
out.addClass('hide');
ind.unbind('blur').blur(function() {
out.html(ind.val());
out.removeClass('hide');
ind.addClass('hide');
});
});
});把这个稍微自己再加工一下，基本思路就是这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以编辑的表格</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>age</td>
<td>操作</td>
</tr>
<tr>
<td>dunn</td>
<td>26</td>
<td>
<a href="javascript:void(0);" onclick="modify(this, 2);">修改</a>
</td>
</tr>
<tr>
<td>alex</td>
<td>29</td>
<td>
<a href="javascript:void(0);" onclick="modify(this, 3);">修改</a>
</td>
</tr>
<tr>
<td>fox</td>
<td>20</td>
<td>
<a href="javascript:void(0);" onclick="modify(this, 4);">修改</a>
</td>
</tr>
</table>
</body>
</html>