今天要交作业，增加订单的题不会做，请各位大侠指点迷津！！！

制作网上订单页面，
单机“增加订单”按钮，可增加订单行，可自己输入商品名称、数量和单价，单击“确定”按钮保存订单，“确定”按钮变为“修改”按钮，单击“删除”按钮可删除一条订单，单击“修改”按钮可对商品的名称，数量和单价进行修改。
下面是我做的，为什么点击确定时：
输入的商品名称就可以获取到，而数量和单价获取的是空值？<!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>
<script type="text/javascript">
var row_index=0;
function insertRow(){
row_index++;
var addTable=document.getElementById("mytable");
var newtr1=addTable.insertRow(addTable.rows.length-1);
//设置新插如行的id
newtr1.setAttribute("id",'row'+row_index);
var newTd1=newtr1.insertCell();
var newTd2=newtr1.insertCell();
var newTd3=newtr1.insertCell();
var newTd4=newtr1.insertCell();
newTd1.innerHTML='<input type="text" value="" class="txtinput"/>';
newTd2.innerHTML='<input type="text" value="" class="txtinput" style=" width:20px;"/>';
newTd3.innerHTML='<input type="text" value="&yen;" class="txtinput" style=" width:30px;"/>';

newTd4.innerHTML="<input type='button' value='删除' onclick=\"del_row('row"+row_index+"')\"><input type='button' value='确定' onclick=\"enter_update('row"+row_index+"')\">";
}
function enter_update(newindex)
{
//获取选中的行
var select_row=document.getElementById(newindex);

//获取确定键按钮
var select_btn = select_row.children.item(3).children.item(1);
select_btn.setAttribute("onclick","enter_update("+newindex+")");
if(select_btn.value=='确定')
{
//按钮显示为修改
select_btn.value='修改';

//获取input中的值
var updatetxt1=select_row.children.item(0).children.item(0).value;
var updatetxt2=select_row.children.item(1).children.item(0).vaule;
var updatetxt3=select_row.children.item(2).children.item(0).vaule;
//显示在td中
select_row.cells[0].innerHTML=updatetxt1;
select_row.cells[1].innerHTML=updatetxt2;
select_row.cells[2].innerHTML=updatetxt3;
//隐藏input
select_row.children.item(0).children.item(0).setAttribute("className","txtinput1");
select_row.children.item(1).children.item(0).class="txtinput1";
select_row.children.item(2).children.item(0).class="txtinput1";
}
else
{
//按钮显示为确定
select_btn.value="确定";
//获取td中的值
var entertxt1=entertxt.children.item(0).children.item(0).value;
var entertxt2=entertxt.children.item(1).children.item(0).value;
var entertxt3=entertxt.children.item(2).children.item(0).value;
//清空td中的内容
select_row.children.item(0).children.item(0).value='';
select_row.children.item(1).children.item(0).value='';
select_row.children.item(2).children.item(0).value='';
//显示input
select_row.children.item(0).children.item(0).className="txtinput";
select_row.children.item(1).children.item(0).className="txtinput";
select_row.children.item(2).children.item(0).className="txtinput";
}
}
function del_row(del_index){
var my_table=document.getElementById('mytable');
var delrow=document.getElementById(del_index);
my_table.deleteRow(delrow.rowIndex);

}
</script>
<style type="text/css">
td{
text-align:center;
padding-left:5px;
}
.tr1{
font-weight:bold;
background-color:#999;
}
.txtinput{
display:block;
text-align:center;
}
.txtinput1{
display:none;
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="0" cellspacing="0" id="mytable">
  <tr class="tr1">
    <td>商品名称</td>
    <td>数量</td>
    <td>单价</td>
    <td>操作</td>
  </tr>
  <tr id="tr_1" name="tr_1">
    <td><input type="text" value="玫瑰保湿睡眠面膜" class="txtinput"/><div></div></td>
    <td><input type="text" value=" 5" style=" width:20px;" class="txtinput"/></td>
    <td><input type="text" value="&yen;48" style="width:30px;" class="txtinput"/></td>
    <td><input type="button" value="删除" onclick="del_row('tr_1')"/>&nbsp;<input type="button"  value="确定" onclick="enter_update('tr_1')"/></td>
  </tr>
  <tr id="addD">
    <td colspan="4"><input type="button" value="增加订单" onclick="insertRow()"/></td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    因为楼主把单词写错了：var updatetxt1=select_row.children.item(0).children.item(0).value;
    var updatetxt2=select_row.children.item(1).children.item(0).vaule;
    var updatetxt3=select_row.children.item(2).children.item(0).vaule;看最后的单词：value
      

  2.   

    var updatetxt2=select_row.children.item(1).children.item(0).vaule;
    var updatetxt3=select_row.children.item(2).children.item(0).vaule;这两句确实写错了.
      

  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>
    <script type="text/javascript">
    var row_index=0;function $(id){return document.getElementById(id);}
    function insertRow(){
      row_index++;
      var addTable=document.getElementById("mytable");
      var newtr1=addTable.insertRow(addTable.rows.length-1);
      //设置新插如行的id
      newtr1.setAttribute("id",'row'+row_index);
      var newTd1=newtr1.insertCell();
      var newTd2=newtr1.insertCell();
      var newTd3=newtr1.insertCell();
      var newTd4=newtr1.insertCell();
      newTd1.innerHTML='<input type="text" value="" class="txtinput"/><span></span>';
      newTd2.innerHTML='<input type="text" value="" class="txtinput" style=" width:20px;"/><span></span>';
      newTd3.innerHTML='<input type="text" value="&yen;" class="txtinput" style=" width:30px;"/><span></span>';
      newTd4.innerHTML="<input type='button' value='删除' onclick=\"del_row('row"+row_index+"')\"><input type='button' value='确定' onclick=\"enter_update('row"+row_index+"')\">";
    }function enter_update(newindex){
      var select_row=$(newindex);//获取选中的行
      var select_btn = select_row.children.item(3).children.item(1);//获取确定键按钮
      select_btn.onclick=function(){enter_update(newindex);}  
      var bln=select_btn.value=='确定' ? true : false;  var a=select_row.getElementsByTagName('INPUT');//取得该行内的所有INPUT控件
      var b=select_row.getElementsByTagName('span');//取得该行内的所有span控件  var arr=[];
      for(var i=0,len=a.length; i<len; i++){
        if(a[i].getAttribute('type')=='text'){arr.push(a[i])}//取得该行内的所有文本框
      }  if(bln){    
        for(var i=0,len=arr.length; i<len; i++){
          if(arr[i].value==''){alert('写点什么再保存吧~~');arr[i].focus(); return}
          b[i].innerHTML+=arr[i].value;//填充文本框数据到单元格
          arr[i].className='txtinput1';//隐藏input
        }
      }
      else{
        for(var i=0,len=arr.length; i<len; i++){
          arr[i].value=b[i].innerHTML;  //填充单元格span数据到文本框
          b[i].innerHTML='';            //清空span中的内容    
          arr[i].className='txtinput';  //显示input
        }
      }
      select_btn.value=bln?'修改':'确定';//按钮更名 
    }function del_row(del_index){
      var my_table=document.getElementById('mytable');
      var delrow=document.getElementById(del_index);
      my_table.deleteRow(delrow.rowIndex);
    }
    </script>
    <style type="text/css">
    td{text-align:center;padding-left:5px;}
    .tr1{font-weight:bold;background-color:#999;}
    .txtinput{display:block;text-align:center;}
    .txtinput1{display:none;}
    </style>
    </head>
    <body>
    <table width="400" border="1" cellpadding="0" cellspacing="0" id="mytable">
      <tr class="tr1">
        <td>商品名称</td>
        <td>数量</td>
        <td>单价</td>
        <td>操作</td>
      </tr>
      <tr id="tr_1" name="tr_1">
        <td><input type="text" value="玫瑰保湿睡眠面膜" class="txtinput"/><span></span></td>
        <td><input type="text" value=" 5" style=" width:20px;" class="txtinput"/><span></span></td>
        <td><input type="text" value="&yen;48" style="width:30px;" class="txtinput"/><span></span></td>
        <td>
          <input type="button" value="删除" onclick="del_row('tr_1')"/>&nbsp;
          <input type="button" value="确定" onclick="enter_update('tr_1')"/>
        </td>
      </tr>
      <tr id="addD"><td colspan="4"><input type="button" value="增加订单" onclick="insertRow()"/></td></tr>
    </table>
    </body>
    </html>