一个订票的表单，如何可以手动增加或者删除一行呢？用什么方式插入数据库呢

2013-02-27

一个订票的表单，怎么可以手动增加或者删除一行呢？用什么方式插入数据库呢？各位大大好，因为对JS一窍不通，所

一个订票的表单，怎么可以手动增加或者删除一行呢？用什么方式插入数据库呢？
各位大大好，因为对JS一窍不通，所以来这请教给位大大，我有一个订票的表单，因为不知道消费者需要订购几张票（就像机票一样，需要知道每一位客人的姓名和联系电话等信息），所以需要写一个可以增加和删除行的表单，比如我需要的这个表为：

<form action="" method="post" name="abc">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="41">姓名</td>
    <td width="41">电话</td>
    <td width="41">性别</td>
    <td width="41">线路</td>
    <td width="61">出发地</td>
    <td width="61">抵达地</td>
    <td width="41">日期</td>
    <td width="41">航班</td>
    <td width="41">时间</td>
    <td width="52">字段1</td>
    <td width="52">字段2</td>
    <td width="52">字段3</td>
    <td width="52">字段4</td>
    <td width="52">字段5</td>
    <td width="52">字段6</td>
    <td width="58">字段7</td>
    <td width="58">删除</td>
  </tr>
  <tr>
    <td width="41"><input name="name" id="name" type="text" size="5"></td>
    <td width="41"><input name="shouji" id="shouji" type="text" size="5"></td>
    <td width="41">
    <select  id="xingbie" >
<option value="男">男</option>
<option value="女">女</option>
<option value="小孩">小孩</option>
</select></td>
    <td width="18"><input name="1" id="1" type="text" size="5"></td>
    <td width="22"><input name="2" id="2" type="text" size="5"></td>
    <td width="22"><input name="3" id="3" type="text" size="5"></td>
    <td width="18"><input name="4" id="4" type="text" size="5"></td>
    <td width="18"><input name="5" id="5" type="text" size="5"></td>
    <td width="18"><input name="6" id="6" type="text" size="5"></td>
    <td width="20"><input name="7" id="7" type="text" size="5"></td>
    <td width="20"><input name="8" id="8" type="text" size="5"></td>
    <td width="20"><input name="9" id="9" type="text" size="5"></td>
    <td width="20"><input name="10" id="10" type="text" size="5"></td>
    <td width="20"><input name="11" id="11" type="text" size="5"></td>
    <td width="20"><input name="12" id="12" type="text" size="5"></td>
    <td width="30"><input name="13" id="13" type="text" size="5"></td>
    <td width="30">删除</td> 
 
  </tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>点击增加一行</td>
  </tr>
</table>
备注：
<textarea name="beizhu" cols="100%" rows=""></textarea>
</form>

请问怎么才能通过点击  【增加一行】或者【删除】来控制表的行数呢？  因为不知道后期的表单是不是这样的结构，所以无耻的希望大大们可以给JS 写上一点注释

再请问，实现的表单的增加和删除行之后，怎么插入数据库呢？数据库应该怎么设计呢？因为不知道客人有多少位，那增加的那些行内的内容通过什么方式插入数据库呢？  后台又通过什么方式去获取这个订单有多少位客人，他们的信息是什么呢？

不知道表达的清楚不清楚，或者有哪位大大有相似的源码实例，也请提供一下，先谢谢各位了自动增加行动态表单的提交
[解决办法]
<!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">
function add(){
var tr=document.getElementById("test");
var temp=tr.cloneNode(true);
document.getElementById("table").appendChild(temp);
}
function del(n){
var p=n.parentNode;
var f=p.parentNode;
f.removeChild(p);
}
</script>
</head>

<body>
<form action="" method="post" name="abc">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
  <tr>
    <td width="41">姓名</td>
    <td width="41">电话</td>
    <td width="41">性别</td>
    <td width="41">线路</td>
    <td width="61">出发地</td>
    <td width="61">抵达地</td>
    <td width="41">日期</td>
    <td width="41">航班</td>
    <td width="41">时间</td>
    <td width="52">字段1</td>
    <td width="52">字段2</td>
    <td width="52">字段3</td>
    <td width="52">字段4</td>
    <td width="52">字段5</td>
    <td width="52">字段6</td>
    <td width="58">字段7</td>
    <td width="58">删除</td>
  </tr>
  <tr id="test">
    <td width="41"><input name="name" id="name" type="text" size="5"></td>
    <td width="41"><input name="shouji" id="shouji" type="text" size="5"></td>
    <td width="41">
    <select  id="xingbie" >
    <option value="男">男</option>
    <option value="女">女</option>
    <option value="小孩">小孩</option>
    </select></td>
    <td width="18"><input name="1" id="1" type="text" size="5"></td>

    <td width="22"><input name="2" id="2" type="text" size="5"></td>
    <td width="22"><input name="3" id="3" type="text" size="5"></td>
    <td width="18"><input name="4" id="4" type="text" size="5"></td>
    <td width="18"><input name="5" id="5" type="text" size="5"></td>
    <td width="18"><input name="6" id="6" type="text" size="5"></td>
    <td width="20"><input name="7" id="7" type="text" size="5"></td>
    <td width="20"><input name="8" id="8" type="text" size="5"></td>
    <td width="20"><input name="9" id="9" type="text" size="5"></td>
    <td width="20"><input name="10" id="10" type="text" size="5"></td>
    <td width="20"><input name="11" id="11" type="text" size="5"></td>
    <td width="20"><input name="12" id="12" type="text" size="5"></td>
    <td width="30"><input name="13" id="13" type="text" size="5"></td>
    <td width="30" onclick="del(this)">删除</td>
  </tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td onclick="add()">点击增加一行</td>
  </tr>
</table>
备注：
<textarea name="beizhu" cols="100%" rows=""></textarea>
</form>
</body>
</html>
删除和增加的话这样试试
不过貌似ie7及以下不支持cloneNode的样子不过cloneNode如果在你把所有的行都删掉就不好使了那自己createElement试试
后台接收的话你需要给每个空起个名字提交后由后台调用相应的方法接收

热点排行

JavaScript

一个订票的表单，如何可以手动增加或者删除一行呢？用什么方式插入数据库呢