我开发了一个表单,我使用一些表来获取数据,其中与这些表相关的一些关键点是: -
“AddNew2”按钮用于添加一个表,如表2。如果单击表1中的“AddNew1”按钮,表2中的行数和使用Addnew2按钮添加的所有其他表将会增加。
表1是获取相同员工姓名的主表是所有表。这意味着如果我单击“AddNew1”按钮,那么表1,表2和其他表中将添加新行,并且我在表1中表达的任何员工名称将在表2和其他表中进行复制。
但我面临一些问题: -
无论我在表1中输入的员工名称是什么,都在表2中完美呈现,但它不会出现在表3中,表4(我通过单击AddNew2按钮添加。)
如果我单击AddNew1按钮在表1中添加新行,则表2中的另一行增加(比如现在表1和表2有2-2行)。但是现在如果我点击AddNew2按钮添加像表2那样的表,那么表只有一个表。
我无法解决此问题。我在这里添加了我的代码,请看看。
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
});
$("#insert17").click(function() {
$(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label><input type="text" class="form-control individual boardName"></input> <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="subject1"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody></table></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Table 1:-
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<input type="button" class="btn green individual" value="Add New+" id="insert17"></input>
<div class="portlet-body individual individualSalSectionSub">
<label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label>
<input type="text" class="form-control individual boardName"></input>
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分:0)
由于您的问题不明确,所以我不确定什么是正确的解决方案,对于您,请尝试以下代码并检查您是否正在寻找此问题。我已经添加了每个方法来在新表中添加员工姓名 -
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
var that = $(this);
//for second table
$('.tableboth').each(function(index,obj){
$(obj).find('.EmpName').val(that.val())})
//for 3rd table
});
});
$("#insert17").click(function() {
$(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> <table class="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Subject</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="subject1"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody></table></div>')
});
&#13;
Table 1:-
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<input type="button" class="btn green individual" value="Add New+" id="insert17"></input>
<div class="portlet-body individual individualSalSectionSub">
<label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label>
<input type="text" class="form-control individual boardName"></input>
Table2:
<table class="tableboth arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Subject</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>
&#13;