<!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>
</head>
<body>
<table id="myTable" border="1" >
  <tr>
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>&yen;568.50</td>
    <td><input type="button" value="删除" onclick="Delete()" id="delete" />
      <input type="button" value="修改" onclick="Update()" id="update"  /></td>
  </tr>
  <tr>
    <td>抗疲劳神奇钛项圈</td>
    <td>2</td>
    <td>&yen;49.00</td>
    <td><input type="button" value="删除" onclick="Delete()"  id="delete" />
      <input type="button" value="修改" onclick="Update()" id="update"  /></td>
  </tr>
</table>
<input type="button" value="增加订单" onclick="Add()"  />
</body>
<script type="text/javascript">

function Delete(){
//删除订单
var x = document.getElementById("myTable");
x.deleteRow(this);
}



function Update(){
//修改订单

/**
#ERROR
1.输入之后的值保存.
2.值传递给新值.

**/


var inputs = document.createElement("input");
var texts =  inputs.setAttribute("type","text");

var x = document.getElementById("myTable").rows[1];//行对象



 x.cells[1].innerHTML = '<input type="text" id="te" />' ;//获取这个地方的值.

 document.getElementById("update").value="确定";//修改显示文字
// var y = document.getElementById("myTable").rows[1];


 var xk = document.getElementById("te").defaultValue;//!~~~~拿不到值
 
 

 

}

function Add(){
//增加订单
var s = document.getElementById("myTable").insertRow(2);
var newCell = s.insertCell(0);
newCell.innerHTML="抗疲劳神奇钛项圈";
var newCell1 = s.insertCell(1);
newCell1.innerHTML="5";
var newCell2 = s.insertCell(2);
newCell2.innerHTML="&yen;20";
var newCell3 = s.insertCell(3);
newCell3.innerHTML='<input type="button" value="删除" onclick="Delete()"  id="delete" /><input type="button" value="修改" onclick="Update()" id="update"  />';

}</script>
</html>
求高手解答...

解决方案 »

  1.   

    红色的的是我改过的。注意:不要有同名的ID,你点击第二个修改的时候,看一下哪个按钮的文字变成“确定”?为什么?就是你有同名的ID的问题。 var v = x.cells[1].innerHTML;//先取出值来
    x.cells[1].innerHTML = '<input type="text" id="te" value="'+v+'" />' ;//获取这个地方的值.
    document.getElementById("update").value="确定";//修改显示文字
    var xk = document.getElementById("te").value;//!~~~~拿不到值
      

  2.   

    <input type="button" value="修改" onclick="Update()" id="update"  /> 修改和更新公用了一个按钮,因为它们不是同时调用的,你可以考虑再设计一个按钮替换当前的,更新完毕后,再恢复
      

  3.   

    <!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>
    </head>
    <body>
    <table id="myTable" border="1" >
      <tr>
        <td>商品名称</td>
        <td>数量</td>
        <td>价格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>防滑真皮休闲鞋</td>
        <td>12</td>
        <td>&yen;568.50</td>
        <td>
    <input type="button" value="删除" onclick="Delete()" id="delete" />
    <input type="button" value="修改" onclick="Update(this , 1)"  /></td>
      </tr>
      <tr>
        <td>抗疲劳神奇钛项圈</td>
        <td>2</td>
        <td>&yen;49.00</td>
        <td><input type="button" value="删除" onclick="Delete()"  id="delete" />
          <input type="button" value="修改" onclick="Update(this , 2)" /></td>
      </tr>
    </table>
    <input type="button" value="增加订单" onclick="Add()"  />
    </body>
    <script type="text/javascript">     
        function Delete(){
            //删除订单    
            var x = document.getElementById("myTable");
            x.deleteRow(this);
        }     
         
         
        function Update(obj,i){
            //修改订单
             
            /**
            #ERROR
            1.输入之后的值保存.
            2.值传递给新值.
             
            **/ 
    var inputs = document.createElement("input");
            var texts =  inputs.setAttribute("type","text");         
            var x = document.getElementById("myTable").rows[i];//行对象         
             
             if(obj.value=="确定"){
    x.cells[1].innerHTML = document.getElementById("te").value;
    obj.value="修改";
     }else{
     var v = x.cells[1].innerHTML;//先取出值来
    x.cells[1].innerHTML = '<input type="text" id="te" value="'+v+'" />' ;//获取这个地方的值.
    obj.value="确定";//修改显示文字
     }
        }
         
        function Add(){
            //增加订单    
            var s = document.getElementById("myTable").insertRow(2);
            var newCell = s.insertCell(0);
            newCell.innerHTML="抗疲劳神奇钛项圈";
            var newCell1 = s.insertCell(1);
            newCell1.innerHTML="5";
            var newCell2 = s.insertCell(2);
            newCell2.innerHTML="&yen;20";
            var newCell3 = s.insertCell(3);
            newCell3.innerHTML='<input type="button" value="删除" onclick="Delete()"  id="delete" /><input type="button" value="修改" onclick="Update()" id="update"  />';
             
        }
     
    </script>
    </html>
      

  4.   

    哥们你结贴够快啊!!!!!反正也弄完了,你试一试<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
    var cnt=$("tr").size();
    for(var i=1;i<cnt;i++){
    $("tr:eq("+i+") :nth-child(4)").append("<input type=\"button\" class=\"a\" value=\"修改\"/>");
    $("tr:eq("+i+") :nth-child(4)").append("<input type=\"button\" class=\"b\" value=\"删除\"/>");
    $("tr:eq("+i+") :nth-child(4)").append("<input type=\"button\" class=\"c\" value=\"保存\"/>");
    } $("input[class=a]").click(function(){
    $(this).parent().prev().prev().html("<input type=\"text\" />");
    });
    $("input[class=b]").click(function(){
    $(this).parent().parent().remove();
    });
    $("input[class=c]").click(function(){
    $(this).parent().prev().prev().html($(":input[type=text]").val());
    });
    $("#abv").click(function(){
    $("tr").eq(1).clone(true).appendTo("tr:last");//("tr:last");
    });
    })
    </script><table border="1" cellspacing="0" cellpadding="0" width="600">
      <tr>
    <td>商品名称</td>
        <td>数量</td>
        <td>价格</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>防滑真皮休闲鞋</td>
        <td>12</td>
        <td>&yen;568.50</td>
        <td></td>
      </tr>
      <tr>
        <td>抗疲劳神奇钛项圈</td>
        <td>2</td>
        <td>&yen;56.50</td>
        <td></td>
      </tr>
    </table>
    <input type="button" value="增加订单" id="abv"  />