<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.btn {
color: blue;
background-color: #FFFFFF;
border: 0px none; //去边框
font-family: "宋体";
font-size: 15px;
text-decoration:underline; //加下划线
}
.btn:hover{
color:red;
border: none;
cursor: hand;
cursor: pointer;
text-decoration:underline; //加下划线
}
.btn:focus {
outline: none; //去边框
}
</style>
<script type="text/javascript">
$(function(){
$("input:button").click(function() {
str = $(this).val()=="编辑"?"确定":"编辑";
$(this).val(str); // 按钮被点击后,在“编辑”和“确定”之间切换
$(this).parent().siblings("td.'.2-item'").each(function() { // 获取当前行的其他单元格
obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
if(!obj_text.length) // 如果没有文本框,则添加文本框使之可以编辑
$(this).html("<input type='text' value='"+$(this).text()+"'>");
else // 如果已经存在文本框,则将其显示为文本框修改的值
$(this).html(obj_text.val());
});
$(this).parent().siblings("td.'.1-item'").each(function() { // 获取当前行的其他单元格
obj_text = $(this).find("select"); // 判断单元格下是否有文本框
if(!obj_text.length) // 如果没有文本框,则添加文本框使之可以编辑
$(this).html("<select><option value='volvo'>Volvo</option><option value='volvo'>Volvo</option></select>");
else // 如果已经存在文本框,则将其显示为文本框修改的值
$(this).html(obj_text.val());
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td class="1-item">1</td>
<td class="2-item">2</td>
<td class="2-item">2</td>
<td><input class="btn" type="button" value="编辑"></td>
</tr>
<tr><td>2</td><td>5</td><td><input type="button" name="btnSubmit" id="btnSubmit" value="编辑"></td></tr>
<tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>
<tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>
</table>
</body>
</html>
注:样式实现的功能:按钮变成超链接。其他代码是可编辑table,如果不可行可能是引用的
<strong><span style="font-size:18px;">jquery.min.js版本问题</span></strong>