我创建了 2 个表单，我正在尝试获取所有数据以及其中的所有数据并将它们发送到一个简单的表格中，但是我希望每个表单只有一个标题，无论输入或打开多少数据它有多少列它将继续添加行而不是像这样的标题：它只有 2 列，但将来可以有 3：因此，我创建了此代码以使其尽可能通用：<!DOCTYPE HTML><html> <head> <script src="js/Jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Test</title> <style> html { -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } </style> </head><body id="body" class="dark-mode"> <select name="Template_Picker" id="Template_Picker"> <option value="" Disabled selected hidden>Select Template</option> <option value="payment">payment</option> <option value="identity">identity</option> </select> <br> <div id="Templates_Pages"> <button class="Template" value="Send" id="Template_Button">Show selected</button> </div> <div class="vl"></div> <form action="test/submit.php" method="post" id="submit_template"> <center id="output"> </center> </form></body><script src="test/template.js"></script></html>
1 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
由于今天的工作已被取消，我有 1/2 小时的空闲时间并使用 vanilla javascript 编写了一个小演示，我认为，语法上有效的 HTML 标记提供了比原始标记更大的灵活性，因为您可以简单地添加新template标签（带有内容）并且 javascript 应该相应地容纳它们并生成所需的输出。整个评论应该有助于澄清正在发生的事情......
document.addEventListener('DOMContentLoaded',()=>{
// references to HTML elements
const oSelect=document.querySelector('select[name="picker"]');
const oBttn=document.querySelector('input[type="button"][name="template_bttn"]');
const oForm=document.querySelector('form[name="template"]');
const oTable=document.querySelector('table[id="output"]');
const colTemplates=Array.from( document.querySelectorAll('template.source') );
const oSubBttn=document.querySelector('input[type="button"][name="subdata"]');
// event handler for when the `show selected` button is clicked
const clickhandler=function(e){
// only proceed if the SELECT has been changed from the default
if( oSelect.value != oSelect.childNodes[1].value ){
// find the template from HTML
let template=document.querySelector( 'template[ id="'+oSelect.value+'" ]' );
// add the template HTML to the empty form
oForm.innerHTML=template.innerHTML;
//assign event handler to button within form
let bttn=oForm.querySelector('input[type="button"]');
bttn.addEventListener('click', addcontenthandler );
}
};
// clear the form when select menu changes
const changehandler=function(e){
oForm.innerHTML='';
};
// event handler that does the final processing of data when all rows have been added...
const submithandler=function(e){
console.info( oTable.outerHTML );
};
const addcontenthandler=function(e){
// form elements that are NOT hidden or buttons...
let col=Array.from( oForm.querySelectorAll('input:not( [type="button"] ):not( [type="hidden"] )') );
// the type determines which tbody to write content to
let type=oForm.querySelector('input[ type="hidden" ]').value;
// the tbody that will be populated according to selection made in the SELECT menu
let tbody=oTable.querySelector('[ data-name="'+type+'" ]')
// If this particular tbody does NOT have column headers, add them based upon form element names in this form
if( tbody && !tbody.querySelector('tr[ scope="col" ]') ){
let tr=document.createElement('tr');
tr.setAttribute('scope','col');
tbody.appendChild( tr );
col.forEach( input=>{
let td=document.createElement('td');
td.textContent=input.name.replace(/\_/gi,' ');
tr.appendChild( td );
});
}
// for each input element add it's content to the table...
tr=document.createElement('tr');
tbody.appendChild( tr );
col.forEach( input=>{
td=document.createElement('td');
td.textContent=input.value;
input.value='';
tr.appendChild( td );
});
};
// add new tbody for each Template found in HTML source & add entry to the select menu
colTemplates.forEach( template=>{
let tbody=document.createElement('tbody');
tbody.dataset.name=template.id;
oTable.appendChild( tbody );
oSelect.appendChild( new Option( template.id, template.id ) );
});
// assign event listeners to various DOM elements
oBttn.addEventListener('click', clickhandler );
oSelect.addEventListener('change', changehandler );
oSubBttn.addEventListener('click', submithandler );
});
body, body *{font-family:monospace;box-sizing:border-box}
table{border:1px solid gray;border-collapse:none;width:50%;margin:5rem 0 0 0;padding:1rem;}
td{border:1px dotted gray;padding:1rem;margin:0.1rem;}
tr[scope='col']{background:gray;color:white}
[name='subdata']{padding:1rem;width:50%;}
.pl-276{}
.collapse.toggle{}
<form method='post'>
<select name='picker'>
<option selected hidden disabled>Please Select Template
<!-- other options are populated dynamically -->
</select>
<input type='button' name='template_bttn' value='Show Selected' />
</form>
<form method='post' name='template'><!-- content will be added here dynamically depending upon chosen template --></form>
<table id='output'></table>
<input type='button' name='subdata' value='Submit generated data' />
<!-- you can add as many `TEMPLATES` as you like with as many `INPUT ELEMENTS` as you like -->
<template id='identity' class='source'>
<input type='hidden' name='DB_Table' value='identity' />
<div class='collapse.toggle pl-276'>
<input type='text' placeholder='Full Name' name='Full_Name' />
<input type='text' placeholder='Last Name' name='Last_Name' />
</div>
<input type='button' value='Add Content' />
</template>
<template id='payment' class='source'>
<input type='hidden' name='DB_Table' value='payment' />
<div class='collapse.toggle pl-276'>
<input type='text' placeholder='Full Name' name='Full_Name' />
<input type='text' placeholder='Credit Card' name='Credit_Card' />
</div>
<input type='button' value='Add Content' />
</template>
<template id='banana' class='source'>
<input type='hidden' name='DB_Table' value='banana' />
<div class='collapse.toggle pl-276'>
<input type='text' placeholder='Banana Colour' name='Banana_Colour' />
<input type='text' placeholder='Banana Shape' name='Banana_Shape' />
<input type='text' placeholder='Banana Weight' name='Banana_Weight' />
</div>
<input type='button' value='Add Content' />
</template>
- 1 回答
- 0 关注
- 107 浏览
添加回答
举报
0/150
提交
取消