javascript - 将表行转换为输入

Question

我有 2 个表格，每行表格都有一个复选框

<table class="One">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 1</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>123</td>
</tr>

 <table class="Two">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 2</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>456789</td>
</tr>

模态内有一个表单

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <form action="" method="post">
         /* inputs here */
          <button type="submit" class="btn btn-primary">Submit</button>
       </form>

      </div>
    </div>
  </div>
</div>

我想从每个表中捕获一个复选框，并在单击“继续”按钮模态时转换为模态中的输入。我如何使用 jquery 做到这一点？

编辑

https://jsfiddle.net/43zy6mt9/

我可以将值传递给变量 jquery。 如何获取该值并用它在模态中创建输入？

Answer 1

$(document).on('click', '#btn_Continue', function() {
  var inpId = 0;
  $('#dvInputs').html('');
  $('table.One input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  $('table.Two input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="One">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 B</td>
    </tr>
  </tbody>
</table>
<table class="Two">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 B</td>
    </tr>
  </tbody>
</table>
<button id="btn_Continue" type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <form action="" method="post">
          <div id="dvInputs"></div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
    </div>
  </div>
</div>

如何创建新元素并将其附加到 div

$('#div-id').append($('<input type="text" id="your-id" value="your-value" />'));