请高手仔细看看下面的代码 为什么点击第一行修改按钮的时候不能修改那

STC1143 2011-08-21 09:47:04
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
table {
font-size: 13px;
line-height: 25px;
border-top: 1px solid #333;
border-left: 1px solid #333;
width: 400px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align: center;
}

.title {
font-weight: bold;
background-color: #cccccc;
}

input {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
function addRow(){
var rowTable = document.getElementById("myTable");
var rowindex = rowTable.rows.length - 1;
var insertRow = rowTable.insertRow(rowindex);
insertRow.id = "row" + rowindex;
var col1 = insertRow.insertCell(0);
col1.innerText = "抗疲劳神奇钛项圈";
var col2 = insertRow.insertCell(1);
col2.innerHTML = rowindex;
var col3 = insertRow.insertCell(2);
col3.innerHTML = "¥49.9"
var col4 = insertRow.insertCell(3);
col4.innerHTML = "<input type='button' value='删除' onclick='deleteRow(" + "\"" + insertRow.id + "\"" + ")'/>"
}

function deleteRow(rowID){
var rowTable = document.getElementById(rowID).rowIndex;
document.getElementById("myTable").deleteRow(rowTable);
}


function editRow(rowId){
alert("upRow('" + rowId + "')");
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].innerHTML;
col[1].innerHTML = "<input name='num" + row + "' style='width:40px;' type='text' value='" + text + "' />";
col[3].lastChild.value = "确定";
col[3].lastChild.setAttribute("onclick", "upRow('" + rowId + "')");
}

function upRow(rowId){
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].firstChild.value;
col[1].innerHTML = text;

col[3].lastChild.value = "修改";
col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");
}
</script>
</head>
<body>
<table id="myTable" width="352" border="1" cellpadding="0" cellspacing="0">
<td>
商品名称
</td>
<td>
数量
</td>
<td>
价格
</td>
<td>
操作
</td>
</tr>
<tr id="del1">
<td>
防滑真皮休闲鞋
</td>
<td>
12
</td>
<td>
¥568.50
</td>
<td>
<input type="button" value="删除" onclick="deleteRow('del1');"/>
<input id="edit1" type="button" value="修改" onclick="editRow('del1');"/>
</td>
</tr>
<tr>
<td colspan="4" style="height:30px;">
<input type="button" name="btn" value="增加订单" onclick="addRow();"/>
</td>
</tr>
</table>
</body>
</html>
...全文
158 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
STC1143 2011-08-21
  • 打赏
  • 举报
回复
您这么改吗
hflixuefeng2006 2011-08-21
  • 打赏
  • 举报
回复
input id="edit1" type="button" value="修改" onclick="editRow(this,'del1')
hflixuefeng2006 2011-08-21
  • 打赏
  • 举报
回复
---------------
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
下了~·睡觉了~·
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
col[3].lastChild主要问题就是这个

找不到按钮当前对象。。。就是因为这句话
STC1143 2011-08-21
  • 打赏
  • 举报
回复
//col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");
这句话怎么错了 还有我的为什么没有找到当前对象啊
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 stc1143 的回复:]
但是我是点击那个按钮 才触发了 那个事件的啊 为什么会没有找到对象那
[/Quote]

你得传入一下,你看我后来不是在前面加了个this吗 这个就是当前对象
STC1143 2011-08-21
  • 打赏
  • 举报
回复
但是我是点击那个按钮 才触发了 那个事件的啊 为什么会没有找到对象那
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 stc1143 的回复:]
对了 那请问我的为什么不对啊 那么写也没有错啊 帮忙分析一下
[/Quote]

你写的代码就是因为没有找到当前点击按钮对象,所以没法改变按钮上的文字,报错了。

所以功能就不好使了。
STC1143 2011-08-21
  • 打赏
  • 举报
回复
对了 那请问我的为什么不对啊 那么写也没有错啊 帮忙分析一下
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 stc1143 的回复:]
但是不对啊 和以前的效果一样 啊 你能仔细看看嘛 谢谢您了 我调了2天了 也没调出来
[/Quote]

你好好看看~·我2楼发的代码~·我测试过了,修改按钮点击完变成确定,文本框改变完值,再点确定按钮变成修改~·
STC1143 2011-08-21
  • 打赏
  • 举报
回复
但是不对啊 和以前的效果一样 啊 你能仔细看看嘛 谢谢您了 我调了2天了 也没调出来
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 stc1143 的回复:]
加个t啥意思啊 您别加东西 就改我的代码就行了 我的代码怎么调用不了方法那 为什么那
[/Quote]

t是当前对象,你看你按钮上的方法多了一个this,就是当前点击的对象~·也就是修改按钮
STC1143 2011-08-21
  • 打赏
  • 举报
回复
加个t啥意思啊 您别加东西 就改我的代码就行了 我的代码怎么调用不了方法那 为什么那
MuBeiBei 2011-08-21
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
table {
font-size: 13px;
line-height: 25px;
border-top: 1px solid #333;
border-left: 1px solid #333;
width: 400px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align: center;
}

.title {
font-weight: bold;
background-color: #cccccc;
}

input {
background-color: #cccccc;
}
</style>
<script type="text/javascript">
function addRow(){
var rowTable = document.getElementById("myTable");
var rowindex = rowTable.rows.length - 1;
var insertRow = rowTable.insertRow(rowindex);
insertRow.id = "row" + rowindex;
var col1 = insertRow.insertCell(0);
col1.innerText = "抗疲劳神奇钛项圈";
var col2 = insertRow.insertCell(1);
col2.innerHTML = rowindex;
var col3 = insertRow.insertCell(2);
col3.innerHTML = "¥49.9"
var col4 = insertRow.insertCell(3);
col4.innerHTML = "<input type='button' value='删除' onclick='deleteRow(" + "\"" + insertRow.id + "\"" + ")'/>"
}

function deleteRow(rowID){
var rowTable = document.getElementById(rowID).rowIndex;
document.getElementById("myTable").deleteRow(rowTable);
}


function editRow(t,rowId){
alert("upRow('" + rowId + "')");
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].innerHTML;
col[1].innerHTML = "<input name='num" + row + "' style='width:40px;' type='text' value='" + text + "' />";
t.value = "确定";
t.onclick = function(){upRow(t,rowId)};
//t.setAttribute("onclick", "upRow('" + rowId + "')");
}

function upRow(t,rowId){
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].firstChild.value;
col[1].innerHTML = text;

t.value = "修改";
t.onclick = function(){editRow(t,rowId)};
//col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");
}
</script>
</head>
<body>
<table id="myTable" width="352" border="1" cellpadding="0" cellspacing="0">
<td>
商品名称
</td>
<td>
数量
</td>
<td>
价格
</td>
<td>
操作
</td>
</tr>
<tr id="del1">
<td>
防滑真皮休闲鞋
</td>
<td>
12
</td>
<td>
¥568.50
</td>
<td>
<input type="button" value="删除" onclick="deleteRow('del1');"/>
<input id="edit1" type="button" value="修改" onclick="editRow(this,'del1');"/>
</td>
</tr>
<tr>
<td colspan="4" style="height:30px;">
<input type="button" name="btn" value="增加订单" onclick="addRow();"/>
</td>
</tr>
</table>
</body>
</html>

87,990

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧