動態新增table的內容- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1001

會員總數：246691
討論主題：190104

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> 動態新增table的內容

[]

[我要回覆]

動態新增table的內容
價值 : 100 QP 點閱數:5250 回應數:3

樓主

迷路

11376	140
8259	1754

發送站內信

需要能按下按鈕後，table自動多出一行，讓使用者輸入資料
目前的寫法如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試JQ新增TR功能</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="1" id="test">
    	<tr>
        	<td colspan="5"><a href='javascript:void(0);' onclick="addTR();">新增</a></td>
        </tr>
    	<tr>
        	<td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
	function addTR(){
		$("#test").append(
			$("<tr>").append(
				$("<td>").html(
					$("<input>").attr("type","text")
								.attr("name","A[]")
								.attr("value","AAA")
				),
				$("<td>").html(
					$("<input>").attr("type","text")
								.attr("name","B[]")
								.attr("value","BBB")
				),
				$("<td>").html(
					$("<input>").attr("type","text")
								.attr("name","C[]")
								.attr("value","CCC")
				),
				$("<td>").html(
					$("<input>").attr("type","text")
								.attr("name","D[]")
								.attr("value","DDD")
				),
				$("<td>").html(
					$("<input>").attr("type","text")
								.attr("name","E[]")
								.attr("value","EEE")
				)
			)
		);
	}
</script>

功能可以正常運作
但是每個td內部只能放一個input
如果都是text之類的還好，可是現在需要放入hidden這種使用者看不到的input
再另外切一個td出來畫面上有些突兀
想請教如何在一個td中放兩個以上的input
有嘗試過下面的寫法，不過只跑出第一個input而已

本篇文章發表於2014-03-28 17:54

1樓最有價值解答 holmes	可以改用如下的方式 $("<tr>").append( $("<td>").html( '<input type=text name=A[] value="AAA"/><input type=hidden name=A[] value="AAA"/>' ), Jsbin JSBIN 本篇文章回覆於2014-03-28 23:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考香帥	請參考另一種形態程式碼如下 <script language="javascript"> function more(){ nt = document.getElementById('tab').insertRow(document.getElementById('tab').rows.length-1) tn = nt.insertCell(0); tt = nt.insertCell(1); ta = nt.insertCell(2); tn.innerHTML = "<input type='text' name='nam[]' />"; tt.innerHTML = "<input type='text' name='tel[]' />"; ta.innerHTML = "<input type='text' name='age[]' /><input type='hidden' name='hid[]' value='"+Date.now()+"' />"; } </script> <form action="http://php.a168a.com/yaya/yayatablehide.php" method="post"> <table width="500" id="tab" border="1" cellpadding="5" cellspacing="1"> <tr align="center"><td>姓名</td><td>電話</td><td>年齡</td></tr> <tr align="center"> <td><input type="text" name="nam[]" /></td> <td><input type="text" name="tel[]" /></td> <td><input type="text" name="age[]" /><input type='hidden' name='hid[]' value='hidtime' /></td> </tr> <tr align="center"><td colspan="3"><input type="submit" value="送出" /> \| <input type="button" value="更多" onclick="more();" /></td></tr> </table> </form> 接收的程式碼如下 <?php $nam = $_POST['nam']; $tel = $_POST['tel']; $age = $_POST['age']; $hid = $_POST['hid']; echo '<html><body><table border="1" cellpadding="5" cellspacing="1">'; $c=count($nam); for($j=0;$j<$c;$j++) { echo "<TR>"; echo "<TD Align=Right >".$nam[$j]."</TD>"; echo "<TD Align=Right >".$tel[$j]."</TD>"; echo "<TD Align=Right >".$age[$j]."</TD>"; echo "<TD Align=Right >".$hid[$j]."</TD>"; echo "</TR>"; } echo "</table></body></html>"; ?> 測試網址在 http://ap.a168a.com/blueshop/addtable3.htm 本篇文章回覆於2014-03-29 19:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應迷路	感謝兩位大大的回覆問題已經解決了本篇文章回覆於2014-03-31 11:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓最有價值解答 holmes	可以改用如下的方式 $("<tr>").append( $("<td>").html( '<input type=text name=A[] value="AAA"/><input type=hidden name=A[] value="AAA"/>' ), Jsbin JSBIN 本篇文章回覆於2014-03-28 23:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考香帥	請參考另一種形態程式碼如下 <script language="javascript"> function more(){ nt = document.getElementById('tab').insertRow(document.getElementById('tab').rows.length-1) tn = nt.insertCell(0); tt = nt.insertCell(1); ta = nt.insertCell(2); tn.innerHTML = "<input type='text' name='nam[]' />"; tt.innerHTML = "<input type='text' name='tel[]' />"; ta.innerHTML = "<input type='text' name='age[]' /><input type='hidden' name='hid[]' value='"+Date.now()+"' />"; } </script> <form action="http://php.a168a.com/yaya/yayatablehide.php" method="post"> <table width="500" id="tab" border="1" cellpadding="5" cellspacing="1"> <tr align="center"><td>姓名</td><td>電話</td><td>年齡</td></tr> <tr align="center"> <td><input type="text" name="nam[]" /></td> <td><input type="text" name="tel[]" /></td> <td><input type="text" name="age[]" /><input type='hidden' name='hid[]' value='hidtime' /></td> </tr> <tr align="center"><td colspan="3"><input type="submit" value="送出" /> \| <input type="button" value="更多" onclick="more();" /></td></tr> </table> </form> 接收的程式碼如下 <?php $nam = $_POST['nam']; $tel = $_POST['tel']; $age = $_POST['age']; $hid = $_POST['hid']; echo '<html><body><table border="1" cellpadding="5" cellspacing="1">'; $c=count($nam); for($j=0;$j<$c;$j++) { echo "<TR>"; echo "<TD Align=Right >".$nam[$j]."</TD>"; echo "<TD Align=Right >".$tel[$j]."</TD>"; echo "<TD Align=Right >".$age[$j]."</TD>"; echo "<TD Align=Right >".$hid[$j]."</TD>"; echo "</TR>"; } echo "</table></body></html>"; ?> 測試網址在 http://ap.a168a.com/blueshop/addtable3.htm 本篇文章回覆於2014-03-29 19:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓作者回應迷路	感謝兩位大大的回覆問題已經解決了本篇文章回覆於2014-03-31 11:29 == 簽名檔 == --未登入的會員無法查看對方簽名檔--