在可编辑文本框中将行从一个表复制到另一个表

时间:2015-10-21 13:27:06

标签: jquery html jsp

如果在第一个表中选中了复选框,我想将行从一个表复制到另一个表。我可以借助以下代码复制数据。但问题是我想要可编辑文本框中的数据,以便我可以编辑复制的数据。请帮助我..我试图搜索很多,但找不到任何有用的东西。

$(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>

2 个答案:

答案 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>