0

我有一个 HTML 表格。假设表格的其中一行具有三个不同的用户输入（文本、复选框和下拉菜单）。我的目标是在引导模式弹出窗口中显示用户输入行中选择的值以及其他表行。分享代码供参考。请检查并帮助。附加输出快照以获得我得到的结果

function addTable() {
  var modalbody = document.querySelector('.modal-body');
  if (modalbody.childElementCount <= 1) {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < 4; i++) {
      var tr = document.createElement('TR');
      tr.style.border = 'solid 2px black';
      tr.style.padding = '5px';
      tableBody.appendChild(tr);
      for (var j = 0; j < 4; j++) {
        var td = document.createElement('TD');
        td.width = '100px';
        td.style.border = 'solid 2px black';
        td.style.padding = '5px';
        td.appendChild(document.createTextNode(oldtble.rows[i].cells[j].innerHTML));
        tr.appendChild(td);
      }
    }
  }
  tableDiv.appendChild(table);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>
          <select name="myOptions" id="myOptions">
            <option value="">Select one from below</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </td>
        <td>
          <input type="text" name="myText" id="myTextinput">
        </td>
        <td>
          <input type="checkbox" id="option1">Option 1<br>
          <input type="checkbox" id="option2">Option 2<br>
          <input type="checkbox" id="option3">Option 3<br>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

一行包含用户输入的 HTML5 表格 我得到的表没有用户输入

4

2 回答 2

1 

function addTable() {
  $('#myTableBody table').remove();
  var modalbody = document.querySelector('.modal-body');
  if (modalbody.childElementCount <= 1) {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < 5; i++) {
      var tr = document.createElement('TR');
      tr.style.border = 'solid 2px black';
      tr.style.padding = '5px';
      tableBody.appendChild(tr);
      
      if(i == 4){
        for (var j = 0; j < 4; j++) {
          var val = "";
          var td = document.createElement('TD');
          td.width = '100px';
          td.style.border = 'solid 2px black';
          td.style.padding = '5px';
          
          if(j == 0){
            val = oldtble.rows[i].cells[j].innerHTML;
          }
          else if(j == 1){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find("#myOptions");
            val = $(finddom).attr("selected",  "selected").val();
          }
          else if(j == 2){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find("#myTextinput");
            val = $(finddom).val();
          }
          else if(j == 3){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find(".option1");
            $(finddom).each(function () {
              if($(this).is(':checked'))
              {
                val += $(this).attr('val');
              }
            });
          }
          
          td.appendChild(document.createTextNode(val));
          tr.appendChild(td);
        }
      }
      else{
        for (var j = 0; j < 4; j++) {
          var td = document.createElement('TD');
          td.width = '100px';
          td.style.border = 'solid 2px black';
          td.style.padding = '5px';
          td.appendChild(document.createTextNode( oldtble.rows[i].cells[j].innerHTML));
          tr.appendChild(td);
        }
      }
    }
  }
  tableDiv.appendChild(table);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>
          <select name="myOptions" id="myOptions">
            <option value="">Select one from below</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </td>
        <td>
          <input type="text" name="myText" id="myTextinput">
        </td>
        <td>
          <input type="checkbox" class="option1" val="Option 1">Option 1<br>
          <input type="checkbox" class="option1"  val="Option 2">Option 2<br>
          <input type="checkbox" class="option1"  val="Option 3">Option 3<br>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

注意：当我使用您的硬编码循环长度时，它可能看起来有点混乱。但这可能是您正在寻找的想法。我在 HTML 复选框和 javascript 函数中进行了一些更改。

于 2021-03-10T10:06:32.327 回答
1

你还没有说你的问题是什么，但是如果它没有在你的模式中显示最后一个（用户输入）行，<4 只会做 4 行（0,1,2,3），而不是第 5 行行与您想要的输入。尝试 <=4 或 <5。

于 2021-03-10T07:05:25.620 回答