我創建了 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 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消