如何使用 javascript 下拉列表将 append 已经创建的 html 表格放入表格中？
[英]How to append already created html form into table using javascript dropdown?
问题描述
I have created a dropdown which has values from 1 to 6(need to add more).
我创建了一个下拉列表，其值从 1 到 6（需要添加更多）。 In that html i have created a blank table and a form.在 html 中，我创建了一个空白表格和一个表格。
what i am tryin to do is..when i select value 1 from dropdown, i want form of id 1 should be appended to table我想做的是..当我从下拉列表中的 select 值为 1 时，我希望将 id 1 的形式附加到表中
and when i select value 2 form with the value of 2 should be appended not any other并且当我 select 值 2 形式时，应附加值为 2 而不是任何其他
Till now what is happening when i select the drop form added to html table but it is not visible到目前为止，当我 select 将删除表单添加到 html 表但它不可见时发生了什么
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <table border ="1" align='center'> <tr> <td> <select id="colors" onchange="changedesc()"> <option value="1">Desc1</option> <option value="2">Desc2</option> <option value="3" >Desc3</option> <option value="4">Desc4</option> <option value="5">Desc5</option> <option value="6" >Desc6</option> </select> </td> </tr> </table> <table id ="addform"> <;-- to be inserted here the div--> </table> <form id=1 style="visibility: hidden;"> <input type="text"> <textarea>abc</textarea> </form> <form id=2 style="visibility. hidden;"> <input type="text"> <input type="checkbo"> </form> </div> <script> function changedesc(){ var eID = document.getElementById("colors"). var colorVal = eID.options[eID.selectedIndex];value if (colorVal=="1"){ var frm = document.getElementById(1); frm.removeAttribute("style"). var ff = document;getElementById("addform") ff.appendChild(frm); } if (colorVal=="2"){ var frm = document.getElementById(2); frm.removeAttribute("style"). var ff = document;getElementById("addform") ff.appendChild(frm); //how to remove previuos one } } </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-05-08 10:36:26
Few point to mention here:这里要提几点：
- in your snippet there is a closing
</div>tag, this would lead to invalid HTML.在您的代码段中有一个结束</div>标记，这将导致无效的 HTML。 - you have a table with one cell that holds a select button, I suggest that you use
<div>since table is made to be used for displaying data that meant to be viewed as a table.您有一个表格，其中一个单元格包含一个 select 按钮，我建议您使用<div>因为表格用于显示要被视为表格的数据。 - you have another table with no
<tr>,<td>, and appending the form tag to id, not having<tr>,<td>tags will be invalid HTML and cause the HTML to not render.您有另一个没有<tr>，<td>的表，并且将表单标记附加到 id，没有<tr>，<td>标记将是无效的 HTML 并导致 HTML 不呈现。 - the hidden forms use
idattribute of1and2although its parsed and recongniszed by the browser I suggest that you use a more meaningful ids.隐藏的 forms 使用1和2的id属性，尽管浏览器对其进行了解析和识别，但我建议您使用更有意义的 id。 one last thing as a suggestion is to use the
display/visibility/opacityattributes to toggle show/hide the forms instead of appending them here.作为建议的最后一件事是使用display/visibility/opacity属性来切换显示/隐藏 forms 而不是在此处附加它们。Here is a snippet with a working HTML from your snippet:
这是一个片段，其中包含来自您的片段的工作 HTML：
function changedesc(){ var eID = document.getElementById("colors"); var colorVal = eID.options[eID.selectedIndex].value if (colorVal=="1"){ var frm = document.getElementById(1).cloneNode(true); console.log(frm); frm.id="new-form1" frm.removeAttribute("style"); var ff = document.getElementById("form-td"); ff.innerHTML = ""; ff.appendChild(frm); } if (colorVal=="2"){ var frm = document.getElementById(2).cloneNode(true); frm.id="new-form2" frm.removeAttribute("style"); var ff = document.getElementById("form-td") ff.innerHTML = ""; ff.appendChild(frm); //how to remove previuos one } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <table border ="1" align='center'> <tr> <td> <select id="colors" onchange="changedesc()"> <option value="1">Desc1</option> <option value="2">Desc2</option> <option value="3" >Desc3</option> <option value="4">Desc4</option> <option value="5">Desc5</option> <option value="6" >Desc6</option> </select> </td> </tr> </table> <table id ="addform"> <tr> <td id="form-td"></td> </tr> <;-- to be inserted here the div--> </table> <form id=1 style="visibility: hidden;"> <input type="text"> <textarea>abc</textarea> </form> <form id=2 style="visibility: hidden;"> <input type="text"> <input type="checkbo"> </form> <script> </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.