问个关于JavaScript 的问题....求指教！

现在我正在做一个页面，如下图：
我想实现，点击添加按钮，就会增加一条项目显示在“已添加报销条目”下面，点击后面的删除会删除掉此项，请问怎么实现？谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼主想操作表格吧？http://www.w3pop.com/learn/view/doc/dom_obj_table/
给你看下我以前写的例子，用ie没问题，火狐获取对象 undefined  ,用jquery可以弥补。。
<!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=GBK" />
  <title> new document </title>
<style type="text/css">
body{
width:980px;
margin:0px auto;
font-size:15px;
}
table{
margin:0px auto;
width:500px;
text-align:center;
}
.title{
background:pink;
font-weight:bold;
}
</style>
<script> var index =0;
/*
*添加一个新行
*/
function insertNewRow(){
//获得表格对象
var orderTable = document.getElementById("orderTable");
var rowIndex = document.getElementById("orderTable").rows.length;
var newRow = orderTable.insertRow(rowIndex-1);
var rowId = "row" + rowIndex;
newRow.id = rowId;
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "抗疲劳神奇钛项圈";
var cell2 = newRow.insertCell(1);
index++;
cell2.innerHTML = index;
var cell3 = newRow.insertCell(2);
cell3.innerHTML = "￥49.00";
var cell4 = newRow.insertCell(3);
cell4.innerHTML = "<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='修改' onclick='updateSelectedRow(\""+rowId+"\")' />";
} /*
*删除选中的行
*/
function deleteSelectedRow(rowId){
//根据rowId查询出该行所在的行索引
var rowIndex = document.getElementById(rowId).rowIndex; if(confirm("确定删除该行吗？")){
document.getElementById("orderTable").deleteRow(rowIndex);
index--;
}
}

var flag=0;  //标志位，标志第几个文本框
/*
  *修改选中的行
  */
function updateSelectedRow(rowId){
var rowIndex = document.getElementById(rowId).rowIndex;
var oldNum =document.getElementById("orderTable").rows[rowIndex].cells[1].innerText;
var oldPrice=document.getElementById("orderTable").rows[rowIndex].cells[2].innerText;
document.getElementById("orderTable").rows[rowIndex].cells[1].innerHTML="<input type='text' id='txtNum"+flag+"' value='"+oldNum+"' size='6'/>";
document.getElementById("orderTable").rows[rowIndex].cells[3].innerHTML="<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='确定' onclick='saveUpdateRow(\""+rowId+"\",\""+flag+"\")' />";
document.getElementById("orderTable").rows[rowIndex].cells[2].innerHTML="<input type='text' id='txtPrice"+flag+"' value='"+oldPrice+"' size='6'/>";
flag++;

} /*
  *保存修改
  */
  function saveUpdateRow(rowId,flag){
var rowIndex = document.getElementById(rowId).rowIndex;
var newNum = document.getElementById("txtNum"+flag).value;
var newPrice = document.getElementById("txtPrice"+flag).value;
document.getElementById("orderTable").rows[rowIndex].cells[1].innerHTML=newNum;
document.getElementById("orderTable").rows[rowIndex].cells[2].innerHTML=newPrice;
document.getElementById("orderTable").rows[rowIndex].cells[3].innerHTML="<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='修改' onclick='updateSelectedRow(\""+rowId+"\")' />";

  } </script>
</head> <body>
  <form name="orderForm" action="" method="post">
<table id="orderTable" name="orderTable" border="1px" cellspacing="0" cellpadding="5">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="row1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>￥568.50</td>
<td><input type="button" name="delete" value="删除" onclick="deleteSelectedRow('row1')" /> <input type="button" name="update" value="修改" onclick="updateSelectedRow('row1')" /></td>
</tr>
<tr>
<td colspan="4"><input type="button" name="insert" value="增加订单" onclick="insertNewRow()"/></td>
</tr>
</table>
  </form>
</body>
</html>
楼主首先要会js的删除、添加标签以及父子标签等
 element.parentNode       XMLElement 父节点
 element.childNodes        Array 子节点
 element.firstChild       XMLElement 第一个子元素
 element.lastChild         XMLElement 最后一个子元素
 element.nextSibling       XMLElement 下一个同一级别的兄弟节点
 element.previousSibling   XMLElement 上一个同一级别的兄弟节点
注意：回车、空格也算一个节点（子标签） 增加：将<div>放入id为b的<body>中
var div = document.createElement("div");
var b = document.getElementById("b");// body的id为b
b.appendChild(div);
 删除：将<body>中的<div>删除
var div = document.getElementById("div1");
b.removeChild(div);
 创建一个文本
var text  =  document.createTextNode("文本内容");
给你个例子。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function addPerson(){
//1获得三个文本框的值
var name = document.getElementById("name").value;
var birth = document.getElementById("birth").value;
var email = document.getElementById("email").value;

//2创建<td>对象
var nameTd = document.createElement("td");
var nameTxt = document.createTextNode(name);
nameTd.appendChild(nameTxt);

var birthTd = document.createElement("td");
var birthTxt = document.createTextNode(birth);
birthTd.appendChild(birthTxt);

var emailTd = document.createElement("td");
var emailTxt = document.createTextNode(email);
emailTd.appendChild(emailTxt);
    //增加一个删除按钮(难点)
var delTd = document.createElement("td");
var delInput = document.createElement("input");
delInput.value="delPsrson";
delInput.type="button";
/*两个注意点：
* 1加入了onclick属性
* 2赋值时不能这样写：=delPerson(this)，这表示传的是调用函数的值
*/
delInput.onclick=function(){
delPerson(this);  //表示调用delPerson()方法
};
delTd.appendChild(delInput);

//3创建tr
var tr = document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(birthTd);
tr.appendChild(emailTd);
tr.appendChild(delTd);

                //4添加tr
var tb = document.getElementById("tb");
tb.appendChild(tr);
}

function delPerson(tag){ //注意不要写delete，是JS中的关键字
var tr = tag.parentNode.parentNode;
var tb = document.getElementById("tb");
tb.removeChild(tr);
}
</script>
</head>
<body id="b">
username:<input id="name" type="text" />
birthday:<input id="birth" type="text"/>
email:<input id="email" type="text"/>
<input type="button" value="add person"  onclick="addPerson();"/>

<table border=2>
<tbody id="tb">
<tr>
<td>suns</td>
<td>1799-2-2</td>
<td>[email protected]</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
<tr>
<td>suns2</td>
<td>1222-1-1</td>
<td>[email protected]</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
<tr>
<td>suns3</td>
<td>1332-1-1</td>
<td>[email protected]</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
</tbody>
</table>
</body>
</html>
呃，正在看Jquery ，实现起来应该不难~