「Javascript增加/刪除欄位」 與 「jquery.timepickr時間選擇器」結合疑問

小弟不才最近回鍋研究PHP,
想做一些小網頁玩玩看,
並根據以下兩個網址為參考。
「Javascript增加/刪除欄位」:http://blog.hsin.tw/2008/javascript-table-add-remove-row/
「jquery.timepickr時間選擇器」:http://haineault.com/media/jquery/ui-timepickr/page/

本來想要的功能是每一個欄位都可以套用時間選擇器,
但試來試去都只有第一行欄位有效果,
之後增加的欄位皆無法達成原有的目的。

試過了id 及 class 改來改去,
$('.timepickr').timepickr({convention: 24});
↓↓↓↓↓↓↓↓↓↓↓↓
$('#timepickr').timepickr({convention: 24});

也試過了將
$('.timepickr').timepickr({convention: 24});
改為
$('.timepickr[]').timepickr({convention: 24});
但都宣告失敗.....

所以前來向各位前輩請教請教!

目前的code為:
<!--
時間選擇器
http://bililite.com/blog/2009/07/09/updating-timepickr/
-->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>;
		<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>;
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">;
		<script type="text/javascript" src="http://bililite.com/inc/jquery.timepickr.js"></script>;
		<script type="text/javascript">
  			$(function(){
    			$('.timepickr').timepickr({convention: 24});
			});
  		</script>
	</head>
	<body>
    	<form id="fomr1" name="fomr1" action="" method="post">
			<table id="mytable">
 				<tr>
    				<td class="td01">標題</td>
    				<td class="td01">內容</td>
    			</tr>
  				<tr>
    				<td><input class="timepickr" name="name[]" type="text" size="12"></td>
    				<td><input name="content[]" type="text" size="12"></td>
    			</tr>
			</table>
			<input type="button" value="增加" onclick="add_new_data()">
			<input type="button" value="減少" onclick="remove_data()"><br>
			<input type="submit" value="送出">
		</form>
		<script>
			//新增欄位
			function add_new_data() {
				//先取得目前的row數
 				var num = document.getElementById("mytable").rows.length;
 				//建立新的tr 因為是從0開始算 所以目前的row數剛好為目前要增加的第幾個tr
 				var Tr = document.getElementById("mytable").insertRow(num);
 				//建立新的td 而Tr.cells.length就是這個tr目前的td數
 				Td = Tr.insertCell(Tr.cells.length);
 				//而這個就是要填入td中的innerHTML
 				Td.innerHTML='<input class="timepickr" name="name[]" type="text" size="12">';
 				//這裡也可以用不同的變數來辨別不同的td (我是用同一個比較省事XD)
 				Td = Tr.insertCell(Tr.cells.length);
 				Td.innerHTML='<input name="content[]" type="text" size="12">';
 				//這樣就好囉 記得td數目要一樣 不然會亂掉~
 			}
			//移除欄位
			function remove_data() {
 				//先取得目前的row數
 				var num = document.getElementById("mytable").rows.length;
 				//防止把標題跟原本的第一個刪除XD
 				if(num >2){
 					//刪除最後一個
 					document.getElementById("mytable").deleteRow(-1);
 				}
 			}
		</script>
	</body>
</html>

評論

  • 不知道為甚麼,貼上來的code,在雙引號" 前面都多個「\」......
  • 提供暴力破解法,在add_new_data() 裡面放
    $(function(){
    	$('.timepickr').timepickr({convention: 24});
    });
    

    http://ithelp.ithome.com.tw/question/10120565
    可以參考這連結(JQUERY解法)
    因為動態產生的無法綁定event所以只好每次新增就call一次
  • 感謝i7807 前輩提供的解法!
    一直沒有想到可以用這種方法!

    另外想請問一下,未來的需求傾向於使用者自行新增的欄位數量,
    可能會達到10個以上,
    這樣的話,如果是使用暴力破解法,
    會不會造成伺服器的負擔呢?
    我使用的是Nginx當伺服器

  • 會不會造成伺服器負擔! 我也不太清楚。XD
  • 可以改成這樣
    function add_new_data() {
                    var num = document.getElementById("mytable").rows.length;
                    var Tr = document.getElementById("mytable").insertRow(num);
                    Td = Tr.insertCell(Tr.cells.length);
                    Td.innerHTML = '<input class="timepickr" name="name[]" type="text" size="12">';
                    $(Td).find('input').timepickr({convention: 24});
                    Td = Tr.insertCell(Tr.cells.length);
                    Td.innerHTML = '<input name="content[]" type="text" size="12">';
                    $(Td).find('input').timepickr({convention: 24});
                }
    

    10 個沒有很多啦,有些例子寫了數千個儲存格,負擔是發生在使用者端
Sign In or Register to comment.