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

<!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 = "&yen;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>
            &yen;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>

解决方案 »

  1.   

    <!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 = "&yen;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>
      &yen;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>
      

  2.   


    t是当前对象，你看你按钮上的方法多了一个this，就是当前点击的对象~·也就是修改按钮
      

  3.   


    你得传入一下，你看我后来不是在前面加了个this吗  这个就是当前对象
      

  4.   

                    //col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");
    这句话怎么错了 还有我的为什么没有找到当前对象啊 
      

  5.   

    col[3].lastChild主要问题就是这个找不到按钮当前对象就是因为这句话
      

  6.   

    input id="edit1" type="button" value="修改" onclick="editRow(this,'del1')