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

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>
...全文
159 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>
易语言源码易语言超级表格自动完成源码
易语言源码易语言超级表格自动完成源码
【Python + 半导体】设备日志自动解析与异常提取工具
本资源提供半导体设备日志自动解析与异常提取的完整解决方案，适用于设备维护、故障诊断、日志审计等场景。
FH8A15G灯串闪灯IC.pdf
FH8A15G灯串闪灯IC
Build PDF translation backend and frontend (3).md
Build PDF translation backend and frontend (3).md
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例AVR精简学习板DXP资料及其相关资料
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例AVR精简学习板DXP资料及其相关资料
JavaScript

87,989

社区成员

224,684

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章