67,513
社区成员
发帖
与我相关
我的任务
分享问个关于JavaScript 的问题....求指教！
现在我正在做一个页面，如下图：
我想实现，点击添加按钮，就会增加一条项目显示在“已添加报销条目”下面，点击后面的删除会删除掉此项，
请问怎么实现？谢谢！
我想实现，点击添加按钮，就会增加一条项目显示在“已添加报销条目”下面，点击后面的删除会删除掉此项，
请问怎么实现？谢谢！
...全文
请发表友善的回复…
发表回复
frank498 2012-08-23
- 打赏
- 举报
呃，正在看Jquery ，实现起来应该不难~
niuniu20008 2012-08-10
- 打赏
- 举报
给你个例子。
<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>su@123.com</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
<tr>
<td>suns2</td>
<td>1222-1-1</td>
<td>su2@123.com</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
<tr>
<td>suns3</td>
<td>1332-1-1</td>
<td>su3@123.com</td>
<td><input type="button" value="del" onclick="delPerson(this);"/></td>
</tr>
</tbody>
</table>
</body>
</html>
niuniu20008 2012-08-10
- 打赏
- 举报
楼主首先要会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("文本内容");
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("文本内容");
夜空中苦逼的程序员 2012-08-10
- 打赏
- 举报
给你看下 我以前写的例子 ，用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>
dddsfdfgfdgfdg 2012-07-25
- 打赏
- 举报
楼主想操作表格吧？http://www.w3pop.com/learn/view/doc/dom_obj_table/
wwwcomcn123 2012-07-25
- 打赏
- 举报
悲剧啊
先弄到你的相册再传试试
先弄到你的相册再传试试
海风林影 2012-07-25
- 打赏
- 举报
[Quote=引用 1 楼 的回复:]
你的图看不到！
[/Quote]能告诉我怎么上传图片吗？
你的图看不到！
[/Quote]能告诉我怎么上传图片吗？
海风林影 2012-07-25
- 打赏
- 举报
为什么图片显示不了呢？？
Cactus_hxk 2012-07-25
- 打赏
- 举报
你的图看不到！
