用datepicker向表添加行 [英] Adding row to table with datepicker
问题描述
我试图在表格中添加按钮点击行（添加行）。我试图动态地添加2个字段。
1）slno
2）日期/时间。
我的问题：
1）行未被添加。
2）如何将日期选择器分配到日期/时间字段，并动态添加。
Jsfiddle http://jsfiddle.net/RXzs7/12/
pl帮助。
html代码：
< script>
$（document）.ready（function（）{
$（'。date'）。each（function（）{
$（this）.datepicker（{minDate： - 1m ，maxDate：0}）;
}）;
}）;
< / script>
< body>
< div id =lpage_container>
< div class =lform_container>
< h3>本地传输费用详情：< / h3>
< form id =localexpensesaction =>
< table summary =本地费用id =localexpense_tablewidth =500border =1>
< thead>
< tr>
< th width =1％align =center>< strong> S1。
号码< / strong>< / th>
< th width =7％align =center>
< strong>日期/时间< / strong>< / th>
< th width =8％align =center>
< strong>移除< / strong>< / th>
< / tr>
< / thead>
< tbody bgcolor =＃CCCCCC>
< tr>
< td width =1％align =center>< input type =text
name =lsrno_00id =srno_00size =1value = 0\" >< / TD>
< td width =7％align =center>< input type =textclass =date
name =ldate_00id =ldate_00 value =size =8>< / td>
< td>& nbsp;< / td>
< / tr>
< / tbody>
< / table>
< table summary =local buttonswidth =500border =1>
< tr>
< td align =right>< input type =buttonvalue =Add Row
id =add_ExpenseRowlocal>
< / tr>
< / table>
< / form>
< / div><！ - END subject_marks - >
< div class =clearfix>< / div>
< / div>
JS code：
$（function（）{
//获取最后一行的ID并将其增加一个
var $ lastChar = 1，$ newRow;
$ get_lastID = function ）{
var $ id = $（'＃localexpense_table tr：last-child td：first-child input'）。attr（name）;
$ lastChar = parseInt（$ id.substr（ $ id.length - 2），10）;
console.log（'GET id：'+ $ lastChar +'| $ id：'+ $ id）;
$ lastChar = $ lastChar + 1 ;
$ newRow =< tr> \
< td>< input type ='text'name ='lsrno_0+ $ lastChar +'value ='0+ $ lastChar + 'size ='1'readonly />< / td> \
< td>< input type ='text'class ='date'name ='ldate_0+ $ lastChar +'id = 'date_0'+ $ lastChar +''size ='8'/>< / td> \
< td>< input type ='button'value ='Remove'class ='del_ExpenseRowlocal'/ >< / td> \
< / tr>;
return $ newRow;
};
// ***** - 开始添加新行
$（'＃add_ExpenseRowlocal'）。on（单击，函数（）{
if（$ lastChar< = 9）{
$ get_lastID（）;
$（'＃localexpense_table tbody'）。append（$ newRow）;
} else {
alert（Reached Maximum Rows！）;
}
}）;
$（document）.on（click，.del_ExpenseRowlocal，function（）{
$（this）.closest（'tr'）。remove（）;
$ lastChar = $ lastChar-2;
}）;
}）;
您使用的是什么jQuery版本？在你的小提琴中，你没有通过框架标签添加jQuery，但是在extenral资源下你有两个版本：1.6.2和1.11.0。当我尝试运行它时，我在控制台中发现错误， $（）。on 不是函数。 .on（）出现在jQuery 1.7中，所以如果您使用的是1.6.2，那么您不能使用 .on（） 。
至于日期选取器，当您运行
$ （'.date'）。each（function（）{
$（this）.datepicker（{minDate： - 1m，maxDate：0
}）;
在文档中准备好将日期选择器添加到当前存在的类
$（'。日期'，$（'＃localexpense_table tbody tr'）。filter（'：last'））。each（function（）{
$（this）.datepicker（{minDate： - 1m，maxDate： 0}）;
}）;
在之后。 append（）调用应该可以工作。
工作小提琴（需要一些样式修复添加的行）
I am trying to add row with button click in table(Add Row). I am trying to add 2 fields dynamically.
1) slno
2) Date/ Time.
My problems : 1) Row is not getting added. 2) How to assign datepicker to "Date /Time" field, added dynamically.
Jsfiddle is http://jsfiddle.net/RXzs7/12/
Pl help.
html code :
<script>
$(document).ready(function() {
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
});
</script>
<body>
<div id="lpage_container">
<div class="lform_container">
<h3>DETAILS OF LOCAL CONVEYANCE EXPENSES :</h3>
<form id="localexpenses" action="">
<table summary="local expense" id="localexpense_table" width="500" border="1">
<thead>
<tr>
<th width="1%" align="center"><strong>Sl.
No.</strong></th>
<th width="7%" align="center">
<strong>Date/Time</strong></th>
<th width="8%" align="center">
<strong>Remove</strong></th>
</tr>
</thead>
<tbody bgcolor="#CCCCCC">
<tr>
<td width="1%" align="center"><input type="text"
name="lsrno_00" id="srno_00" size="1" value="0"></td>
<td width="7%" align="center"><input type="text" class="date"
name="ldate_00" id="ldate_00" value="" size="8"></td>
<td> </td>
</tr>
</tbody>
</table>
<table summary="local buttons" width="500" border="1">
<tr>
<td align="right"><input type="button" value="Add Row"
id="add_ExpenseRowlocal">
</tr>
</table>
</form>
</div><!-- END subject_marks -->
<div class="clearfix"></div>
</div>
JS code :
$(function(){
// GET ID OF last row and increment it by one
var $lastChar =1, $newRow;
$get_lastID = function(){
var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :'+$id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /></td> \
<td><input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/></td> \
<td><input type='button' value='Remove' class='del_ExpenseRowlocal' /></td> \
</tr>";
return $newRow;
};
// ***** -- START ADDING NEW ROWS
$('#add_ExpenseRowlocal').on("click", function(){
if($lastChar <= 9){
$get_lastID();
$('#localexpense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
}
});
$(document).on("click", ".del_ExpenseRowlocal", function(){
$(this).closest('tr').remove();
$lastChar = $lastChar-2;
});
});
What jQuery version are you using? In your fiddle you have not added jQuery via the framework tab but under extenral resources you have two versions: 1.6.2 and 1.11.0. When I try and run it I get an error in the console that $().onis not a function. .on() came in jQuery 1.7 so if you are using 1.6.2 then you cannot use .on().
As for the date picker, when you run
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0"
});
in your document ready you add a date picker to all field with class date which currently exist. You must add the date picker to the new date fields after you have added the row to the DOM. Something like
$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
after your .append() call should work.
Working fiddle (needs some styles fixing for the added rows)
这篇关于用datepicker向表添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
