如何使用 javascript 在模式弹出窗口中显示用户输入值

Question

I have an HTML table.我有一个 HTML 表。 Assume that one of the rows of table has three different user inputs(text, checkboxes, and dropdown).假设表格的其中一行具有三个不同的用户输入（文本、复选框和下拉菜单）。 My aim is to show the values selected in user inputs row along with other table rows in a bootstrap modal popup window.我的目标是在引导模式弹出窗口 window 中显示用户输入行中选择的值以及其他表行。 Sharing the code for reference.分享代码供参考。 Please check and help.请检查并帮助。 Attaching the output snaps for results what i am getting连接 output 以获取我得到的结果

 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>

Answer 1

You haven't said what your issue is, but if it is that it is not showing the last (user input) row in your modal, <4 will only do 4 rows (0,1,2,3), not the 5th row with your desired inputs.你还没有说你的问题是什么，但是如果它没有在你的模式中显示最后一个（用户输入）行，<4 只会做 4 行（0,1,2,3），而不是第 5 行行与您想要的输入。 Try <=4 or <5.尝试 <=4 或 <5。

Answer 2

 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>

Note: it may seem a bit messy cause as I use your hardcode loop length.注意：当我使用您的硬编码循环长度时，它可能看起来有点混乱。 But this may be the idea you looking for.但这可能是您正在寻找的想法。 I make some changes in the HTML checkboxes and in the javascript function.我在 HTML 复选框和 javascript function 中进行了一些更改。

如何使用 javascript 在模式弹出窗口中显示用户输入值

问题描述

2 个解决方案

解决方案1
1 2021-03-10 07:05:25

解决方案2
1 2021-03-10 10:06:32

如何使用 javascript 在模式弹出窗口中显示用户输入值

问题描述

2 个解决方案

解决方案1 1 2021-03-10 07:05:25

解决方案2 1 2021-03-10 10:06:32

解决方案1
1 2021-03-10 07:05:25

解决方案2
1 2021-03-10 10:06:32