如何为日期添加唯一的ID。基本上,我想在日期上添加一个唯一ID以使其唯一,然后单击表的“添加行”按钮以创建一个新记录,然后将生成一个包含新的唯一ID的新日期。
因此,基本上,实际结果是,通过单击添加行按钮,它将创建包含新日期的包含内容的另一行。如果有任何人可以帮助的话,我们将不胜感激。
<table class="table table-bordered" id="adj_table">
<thead>
<tr>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="tbl_adj">
<td>
<div class="form-group input-group">
<input type="text" class="form-control input-sm" id="adj_date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" style="text-align: left;">
<button class="btn btn-danger btn-block btn-sm" onclick="addTableRows()">Add Row</button>
</td>
</tr>
</tfoot>
这是我添加行的功能。
function addTableRows(){
var count = $('#adj_table >tbody >tr').length;
var count_length = count + 1;
var newRow = $("<tr id='tr_"+count_length+"' class='tbl_adj'>");
var column = "";
column += '<td><input type="text" class="form-control input-sm"></td>';
column += '<td><input type="text" class="form-control input-sm"></td>';
column += '<td><input type="text" class="form-control input-sm"></td>';
newRow.append(column);
$("#adj_table").append(newRow);
}
这是我的约会,我使用daterangepicker。
$('#adj_date').daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});
因此,基本上实际的结果是,通过单击添加按钮,它将创建包含新日期的包含内容的另一行。如果有任何人可以帮助的话,我们将不胜感激。
答案 0 :(得分:0)
尝试一下:-
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<table class="table table-bordered" id="adj_table">
<thead>
<tr>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="tbl_adj">
<td>
<div class="form-group input-group">
<input type="text" class="form-control input-sm adj_date" id="adj_date1">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" style="text-align: left;">
<button class="btn btn-danger btn-block btn-sm" onclick="addTableRows()">Add Row</button>
</td>
</tr>
</tfoot>
</body>
</html>
<script>
function addTableRows(){
var count = $('#adj_table >tbody >tr').length;
var count_length = count + 1;
var newRow = $("<tr id='tr_"+count_length+"' class='tbl_adj'>");
var column = "";
//generate random date between start_date and end_date
var randomDate1 = randomDate(new Date(2019, 0, 1), new Date());
//generate random date without range
//var randomDate1 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');
var randomDate2 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');
var randomDate3 = moment(new Date(+(new Date()) - Math.floor(Math.random()*10000000000))).format('MM/DD/YYYY');
column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate1 +'"></td>';
column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate2 +'"></td>';
column += '<td><input type="text" class="form-control input-sm adj_date" value="' + randomDate3 +'"></td>';
newRow.append(column);
$("#adj_table").append(newRow);
}
$('.adj_date').daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});
$('body').on('focus',".adj_date", function(){
$(this).daterangepicker({ singleDatePicker: true, locale: { format: 'MM/DD/YYYY'}});
});
//generate random date between start_date and end_date
function randomDate(start, end) {
return moment(new Date(+(start.getTime()) - Math.floor(Math.random()* (end.getTime() - start.getTime()) ))).format('MM/DD/YYYY');
}
</script>
答案 1 :(得分:-1)
尝试在将列(td)附加到它之前关闭tr标记
xmlString.trim().replace("\n", "").replaceAll("( *)<", "<")