Javascript / Jquery Logic - 关于Modal和.data
大家好，我有几个问题，所以我会尽我所能。
我使用javascript和jquery以及ajax将json数据传递给我的数据库。我也使用Spring MVC来处理存储/请求数据，但这不是我关注的问题。
我正在使用Metronic主题，目前在表单向导中，学生需要填写申请表。我无法使用Modal在表和Modal之间获取/传递数据，反之亦然。
我有一些我想要完成的目标，并且在尝试了一些方法后我遇到了问题。
1）这是截图，我将解释我要实现的目标以及我遇到的问题。
单击“添加新所有者”按钮时，应显示模式（您可以在下面看到）。使用模态插入的数据将填充在按钮下方的表格中，如箭头所示。
所以，在“matrik号”中字段，它是一个Select2下拉列表，将在键入时过滤学生的ID。一旦选择了ID，从姓名到电子邮件的字段（包括学生的照片）将自动填充。
点击“添加所有者”按钮（在模态中）时，这些数据将显示在第一个屏幕截图的表格中。
以下是模态和按钮的相关代码。
HTML
<div class="tab-pane" id="tab2">
<h3 class="form-section">Owner Info</h3>
<div class="form-group">
<div class="col-md-12">
<a class="btn green add-owner pull-left"
data-toggle="modal" href="#large"><i
class="fa fa-plus"></i>Add New Owner</a>
<table class="table borderless table-hover" id="tab_owner">
<thead>
<tr>
<th> Matrik No. </th>
<th> Name</th>
<th> IC No.</th>
<th> Birth Place</th>
<th> Faculty</th>
<th> Phone No.</th>
<th> Email</th>
<th width="3%"></th>
<th width="3%"></th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade bs-modal-lg" id="large" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title">Add New Owner</h4>
</div>
<div class="modal-body">
<form id='frm'>
<div class="row">
<div class="col-md-10 center-block">
<div class="form-group">
<label class="control-label col-md-3">Matrik No. <span
class="required"> * </span></label>
<div class="col-md-9">
<input name="matrik_number" class="form-control select2" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-3"></label>
<div class="col-md-8">
<img name="student_photo" id="student_photo" alt=""
class="img-circle img-responsive center-block" />
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label col-md-3">Name</label>
<div class="col-md-7">
<input name="student_name" id="student_name" type="text" class="form-control"
readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">IC Number</label>
<div class="col-md-7">
<input name="student_ic" id="student_ic" type="text" class="form-control"
readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Birth Place</label>
<div class="col-md-7">
<input name="student_birthplace" id="student_birthplace" type="text"
class="form-control" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Faculty</label>
<div class="col-md-7">
<input name="faculty_name" id="faculty_name" type="text"
class="form-control" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Study Year</label>
<div class="col-md-7">
<input name="student_studyyear" id="student_studyyear" type="text"
class="form-control" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Phone No.</label>
<div class="col-md-7">
<input name="student_phoneno" id="student_phone" maxlength="11" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"
class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">E-Mail</label>
<div class="col-md-7">
<input name="student_emailadd" id="student_email" type="text" maxlength="50"
class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Year Start
Business</label>
<div class="col-md-7">
<div class="radio-list">
<label class="radio-inline"> <input type="radio"
name="optionsRadios4" value="option1" /> 1
</label> <label class="radio-inline"> <input
type="radio" name="optionsRadios4" value="option2" />
2
</label> </label> <label class="radio-inline"> <input
type="radio" name="optionsRadios4" value="option3" />
3
</label> <label class="radio-inline"> <input
type="radio" name="optionsRadios4" value="option4" />
4
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline"
data-dismiss="modal">Close</button>
<a class="btn green add-modal-owner" data-dismiss="modal">Add Owner</a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
JS
//tab2
tab_owner.on('click', '.add-owner', function (e){
e.preventDefault();
});
tab_owner.on('click', '.del-owner', function (e){
e.preventDefault();
$(this).closest('tr').html('');
});
tab_owner.on('click', '.edit-owner', function (e){
e.preventDefault();
var m = $(this).closest('tr').find('.matrik').html();
var n = $(this).closest('tr').find('.name').html();
var i = $(this).closest('tr').find('.ic').html();
var bp = $(this).closest('tr').find('.bp').html();
var fac = $(this).closest('tr').find('.fac').html();
var f = $(this).closest('tr').find('.fon').html();
var e = $(this).closest('tr').find('.email').html();
$('#matrik_number', large).val(m);
$('#student_name', large).val(n);
$('#student_ic', large).val(i);
$('#student_birthplace', large).val(bp);
$('#faculty_name', large).val(fac);
$('#student_phone', large).val(f);
$('#student_email', large).val(e);
large.modal();
});
large.on('click', '.add-modal-owner', function (e){
e.preventDefault();
var student_data = {
id:$('[name=matrik_number]').val(),
phone:$("[name=student_phoneno]").val(),
email:$("[name=student_emailadd]").val(),
optionradio4:$("[name=optionsRadios4]").val()
};
var show_studentdata = $("<tr>\n" +
"<td class='matrik'>" + $('[name=matrik_number]').val() + "</td>\n" +
"<td class='name'>" + $('#student_name').val()+ "</td>\n" +
"<td class='ic'>" + $('#student_ic').val() + "</td>\n" +
"<td class='bp'>" + $('#student_birthplace').val() + "</td>\n" +
"<td class='fac'>" + $('#faculty_name').val() + "</td>\n" +
"<td class='fon'>" + $('#student_phone').val() + "</td>\n" +
"<td class='email'>" + $('#student_email').val() + "</td>\n" +
"<td width='3%'><a class='btn btn-outline btn-circle btn-sm purple edit-owner pull-right'><i class='fa fa-edit'></i>Edit</a></td>" +
"<td width='3%'><a class='btn btn-outline btn-circle btn-sm red del-owner pull-right'><i class='fa fa-remove'></i>Remove</a></td>" +
"</tr>\n");
//insert modal data to tables/forms
$('tbody',tab_owner).append(show_studentdata).data(student_data);
//console.log(student_data);
//console.log($('tr#C11A007').data());
//clear all data upon close/save
$(".modal").on("hidden.bs.modal", function(){
$("input").val("");
$('[name=optionsRadios4]',form).each(function(){
$(this).prop('checked',false).uniform('refresh');
});
$('#student_photo').attr('src', '');
$("[name=matrik_number]").select2("val", "");
});
});
当添加所有者按钮工作时，我设法执行了append（）部分。但是，当我想编辑（如何调用它）时，我遇到了问题，如果没有插入输入，则验证添加所有者按钮（内部模态）。
这是第3张截图，显示添加所有者后表格的外观，
标记为数字1，暂时忽略它。
标记为数字2，是编辑按钮。现在（如果你正在查看我的代码，我只是使用find（）来获取html内容但是我确定可以有更好的方法吗？如果我按“编辑”并更正一些信息，它也会创建重复数据，再次按模式中的添加所有者。
我希望我的解释不会混淆那些阅读此内容的人。我已经坚持了一个星期了。
提前致谢。
1 个答案:
答案 0 :(得分：0)
如果我正确理解您的问题，您正在尝试编辑表格中的一行。但是，每次编辑现有记录时，您编写的代码都会添加一个新行。这是因为以下行创建了一个新行。
$('tbody', tab_owner).append(show_studentdata).data(student_data);
为了能够编辑行，您需要用新行替换旧行。
在tab_owner.on()中，您可以访问当前tr。您可以将其保存在全局变量中，如
selectedRow = $(this).closest('tr');
（务必在事后清理）
稍后，在large.on()中，您可以执行以下操作
if (selectedRow && selectedRow.length) { // check if in edit mode
selectedRow.replaceWith(show_studentdata).data(student_data);
} else { // add mode
$('tbody', tab_owner).append(show_studentdata).data(student_data);
}
请务必清除selectedRow添加
tab_owner.on('click', '.add-owner', function(e) {
e.preventDefault();
selectedRow = null;
});
对于验证部分，如果验证失败，您可以在student_data和large.on()中检查return变量的条件。像
if (student_data.email == "") {
return;
}
希望这有帮助
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？