如果在第一个表中选中了复选框,我想将行从一个表复制到另一个表。我可以借助以下代码复制数据。但问题是我想要可编辑文本框中的数据,以便我可以编辑复制的数据。请帮助我..我试图搜索很多,但找不到任何有用的东西。
$(document).ready(function() {
$('#add').on("click", function() {
var copiedRow = $('#table1 tbody input:checked').parent().parent().clone();
$('#table2 tr:first').after(copiedRow);
});
});
所以这是来自JSP table1的代码
<c:if test="${!empty asilList}">
<table id="table1">
<tr>
<th>Select</th>
<th>HARA ID</th>
<th>Vehicle Condition(V)</th>
<th>Environmental Condition(E)</th>
<th>Driving Conditions</th>
<th>Scenario</th>
<th>E</th>
<th>Situation/Condition for Exposure</th>
<th>C</th>
<th>Controllability</th>
<th>S</th>
<th>Severity</th>
<th>ASIL</th>
<th>Remarks</th>
</tr>
<c:forEach items="${asilList}" var="a" varStatus="status">
<tr>
<td><input type="checkbox"></td>
<td>${a.haraId}</td>
<td>${a.scenario.vehicleCondition.vehicleCondition}</td>
<td>${a.scenario.environmentalCondition.environmentalCondition}</td>
<td>${a.scenario.drivingCondition.drivingCondition}</td>
<td>${a.scenario.scenario}</td>
<td>${a.exposure.exposure}</td>
<td>${a.exposure.remark}</td>
<td>${a.controllability.controllability}</td>
<td>${a.controllability.remark}</td>
<td>${a.severity.severity}</td>
<td>${a.severity.remark}</td>
<td>${a.asil}</td>
<td></td>
</tr>
</c:forEach>
</table>
</c:if>
表2
<table id="table2">
<tr>
<th>Select</th>
<th>HARA ID</th>
<th>Vehicle Condition(V)</th>
<th>Environmental Condition(E)</th>
<th>Driving Conditions</th>
<th>Scenario</th>
<th>E</th>
<th>Situation/Condition for Exposure</th>
<th>C</th>
<th>Controllability</th>
<th>S</th>
<th>Severity</th>
<th>ASIL</th>
<th>Remarks</th>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><select>
<optgroup label="Vehicle Conditions">
</optgroup>
</select></td>
<td><select>
<optgroup label="Environmental Conditions">
</optgroup>
</select></td>
<td><select>
<optgroup label="Driving Conditions">
</optgroup>
</select></td>
<td><select>
<optgroup label="Scenarios">
</optgroup>
</select></td>
<td><select>
<optgroup label="Exposure">
</optgroup>
</select></td>
<td><input type="text"></td>
<td><select>
<optgroup label="Controllability">
</optgroup>
</select></td>
<td><input type="text"></td>
<td><select>
<optgroup label="Severity">
</optgroup>
</select></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
答案 0 :(得分:1)
您没有提供足够的信息来准确回答您的问题。我只是猜测我的解决方案。您说您希望将行复制到可编辑的文本框中,并且从您的代码中看起来您希望该代码位于第二个表的第二行中。所以,你去https://jsfiddle.net/v5agtrpv/
$(document).ready(function() {
$('#add').on("click", function() {
$('#table2 tbody').empty();
var $newrow,
$newcolumn;
$('#table1 tbody input:checked').parent().parent().each(function() {
$newrow = $('<tr></tr>').appendTo($('#table2 tbody'));
$("td", this).each(function() {
if($("input", this).length == 0) {
$newcolumn = $("<td><input type='text' /></td>").appendTo($newrow);
$("input", $newcolumn).val($(this).text());
}
});
});
});
});
答案 1 :(得分:0)
尝试以下
$(document).ready(function() {
$('#add').on("click", function() {
var copiedRow = $('#table1 tbody input:checked').parent().parent().clone();
var firstRow = $(copiedRow).find('td span:eq(0)').text();
$('#table2 tbody').append(copiedRow)
$('#table2 tbody tr td:eq(1)').empty().append('<input type="text" value="'+firstRow+'">')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="table1">
<tbody>
<tr>
<td><input type="checkbox" id="add" /></td>
<td><span>Php</span></td>
<td><span>Jquery</span></td>
</tr>
</tbody>
</table>
<table class="table" id="table2">
<tbody>
</tbody>
</table>