c#和Javascript -如何添加移除对象到Javascript数组和回发到服务器
C# and Javascript - How to Add Remove Objects To A Javascript Array and Postback to Server?
我有一个表单,其中有一个部分供用户添加多个约会日期。表单的这一部分有以下字段:开始日期、结束日期和一个添加按钮。
<form action="/someaction">
Start Date <input type="text" id="StartDate" name="StartDate"><br>
End Date: <input type="text" id="EndDate" name="EndDate"><br>
<a class="btn btn-default js-add" href="#" role="button">Add</a>
<table class="table" >
<tbody id="dates" >
</tbody>
</table>
// Other form fields
<input type="submit" value="Submit">
</form>
每次用户添加约会时,我想将值存储在JavaScript对象数组中,并显示数组中的项目数量以及添加的对象的详细信息,并提供从列表中删除该对象的选项。下面是我最初的尝试:
<script>
var appointments = [];
$(".js-add").click(function (e) {
e.preventDefault();
var startDate = $("#StartDate").val();
var endDate = ("#EndDate").val()
// What can I use to uniquely identify each object incase we need to delete???
appointments.push( { startDate: startDate , endDate: endDate });
$('<tr/>', { html: '<td >' + startDate + '</td><td>' + endDate + '</td><td><a class="js-delete" href="" data-id="">delete</a></td>'})
.appendTo($('#dates'));
}
$(".js-delete").click(function (e) {
e.preventDefault();
var id = $(this).attr("data-id");
// How do I remove the selected object from the array???
// appointments.splice(x,1);
}
</script>
如何使用数组索引从数组中删除对象。我在删除链接上有一个data-id属性,它将包含数组索引。
但是数组索引可以改变每次对象添加或删除,所以我怎么能更新现有行的data-id属性?
其次,我如何传递这个对象回到服务器,因为它没有附加到任何表单输入字段?
如果你能帮助我,我会很感激的。
如何从数组中删除对象。我在删除链接上有一个data-id属性,但是我可以使用什么来唯一标识对象呢?
因为要创建一个新的表行,所以需要:
- 委托事件(即:$(document))。on('click', '.js-delete', function (e) {)
- 使用data-id属性将当前索引的值赋给它
- 在删除一行时,您需要重新排列data-id 的值
如何将这个对象传递回服务器
您可以使用隐藏的输入字段,并将其值设置为数组值。
代码片段:
var appointments = [];
//
// delegated event
//
$(document).on('click', '.js-delete', function (e) {
e.preventDefault();
var id = +$(this).attr("data-id");
appointments.splice(id, 1);
$(this).closest('tr').remove();
//
// rearrange the values of data-id attributes
//
$('#dates tr td:nth-child(3) a').each(function(index, element) {
var tId = +$(element).attr("data-id");
if (tId > id) {
$(element).attr("data-id", tId - 1);
}
});
});
$(function () {
$(".js-add").click(function (e) {
e.preventDefault();
var startDate = $("#StartDate").val();
var endDate = $("#EndDate").val();
// In order to uniquely identify each object you can set the
// value of data-id attribute with current array index
appointments.push( { startDate: startDate , endDate: endDate });
$('<tr/>', { html: '<td >' + startDate + '</td><td>' + endDate + '</td><td><a class="js-delete" href="" data-id="' + (appointments.length - 1) + '">delete</a></td>'})
.appendTo($('#dates'));
//
// a possible sorting.... Consider to use a date compare
// instead of a string compare function.
//
$.each($('#dates tr').get().sort(function(a, b) {
return a.childNodes[0].textContent.localeCompare(b.childNodes[0].textContent);
}), function(index, ele) {
$('#dates').append(ele);
});
});
//
// On form submit stringify your array and save it into
// an hidden input field
//
$('input[type="submit"]').on('click', function(e) {
e.preventDefault();
$('#appointments').val(JSON.stringify(appointments));
console.log($('#appointments').val());
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="/someaction">
<input id="appointments" type="hidden">
Start Date <input type="text" id="StartDate" name="StartDate"><br>
End Date: <input type="text" id="EndDate" name="EndDate"><br>
<a class="btn btn-default js-add" href="#" role="button">Add</a>
<table class="table" >
<tbody id="dates" >
</tbody>
</table>
<!-- Other form fields -->
<input type="submit" value="Submit">
</form>
相关文章:
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 循环遍历以数组为值的Javascript对象
- 从ajax请求中获取javascript对象
- 如何从对象的原型方法访问JavaScript对象属性
- 将XML转换为普通的旧JavaScript对象
- 通过引用传递JavaScript对象
- javascript对象操作:根据指定条件选择属性
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 如何在异步函数中使用javascript对象
- 临时Javascript对象
- 如何在ASP中为用户控件添加Javascript对象网
- 使用数组向下搜索Javascript对象
- Rails将JavaScript对象存储到Model的有效方式
- JavaScript对象不是从原型链继承的
- 如何创建具有默认值的JavaScript对象字段?(AngularJS模型相关)
- SetInterval在javascript对象中表现怪异
- Javascript 对象和 this 关键字
- 如何在不知道关键字的情况下访问javascript对象值
- 在 JavaScript 对象中设置要使用的运算符的属性
- 如何搜索JavaScript对象并更改值