0
我試圖創建一個html標籤式表單，其中每個命名標籤都具有在公共div中定義的一組公共常用輸入。當提交被擊中時，我希望返回所有選項卡的所有輸入。如果未勾選未選中的複選框，則不會造成問題。如何使用公共div創建標籤式html表格
每個輸入都需要一個基於標籤名稱的唯一ID。我已經嘗試了幾種方法，但我似乎無法做到。
一個簡單的代碼示例會很棒。使用jquery和ajax不是問題，
歡呼聲。
編輯： 輸入被複制/追加到標籤內容div中正確的div。我想通過將它們與選項卡名稱結合來更改輸入的名稱和ID。目標div中的孩子未定義，所以我不能重命名輸入。
下面是代碼：
<script>
// More hackery, list the tab divs
var tabs = ["tab1","tab2"];
var currenttab = '';
function showTab(tab){
// Make sure all the tabs are hidden
for(i=0; i < tabs.length; i++){
var obj = document.getElementById(tabs[i]);
obj.style.display = "none";
}
// show the 'one' tab we're interested in
obj.style.display = "block";
}
function aciOnload() {
// Get the tab we're interested in
var objs =[];
for(var i = 0; i < tabs.length; i++){
var obj= document.getElementById(tabs[i]);
// Find the correct div
var cldrn = obj.childNodes;
for(var m = 0; m < cldrn.length; m++)
{
if(cldrn.item(m).id == "common")
{
// Copy the common content over to the tab
var child = cldrn.item(m);
child.innerHTML ='';
child.innerHTML += document.getElementById("common_stuff").innerHTML;
eval(child);
var inputs = child.childNodes;
// Change the input names
// ***NOTE: there a 3 childNodes which are "undefined"***
for (var n = 0; n< inputs.length; n++){
if (inputs.item(n).tag == 'input'){
inputs.item(n).id= tabs[i] +'_' + inputs.item(n).id;
inputs.item(n).name= tabs[i] +'_' + inputs.item(n).name;
}
}
break;
}
}
}
}
// run our loader
// if(typeof aciOnload=='function')aciOnload();
</script>
</head>
<body onload='aciOnload()'>
<h1>Tabbed Form</h1>
<hr/>
<div class="tabs">
<a class="tab" onclick="showTab('tab1')">Tab One</a>
<a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>
<form name="myForm" action="#" >
<!-- note that for the first tab we need to
manually set the display to visible -->
<div id="tab1" class="tabContent" style="display:block">
<div id="common" >
</div>
</div>
<div id="tab2" class="tabContent">
<div id="common" >
</div>
</div>
<input type="submit" action="http://example.com/" method="post">
</form>
<div id="common_stuff" class="common_stuff" >
<table>
<tr>
<td>Field One: </td>
<td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
</tr>
<tr>
<td>Field Two: </td>
<td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
</tr>
<tr>
<td>Field Three: </td>
<td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
</tr>
</table>
</div>
<hr>
</body>
EDIT2： 這裏是工作代碼：
<script>
// this is a bit of a hack here
// just list the tab content divs here
var tabs = ["tab1","tab2"];
var currenttab = '';
function showTab(tab){
// Make sure all the tabs are hidden
for(i=0; i < tabs.length; i++){
var obj = document.getElementById(tabs[i]);
if (tabs[i] == tab){
var currenttab = obj;
}
obj.style.display = "none";
}
// show the tab we're interested in
currenttab.style.display = "block";
}
function aciOnload() {
// Get the tab we're interested in
for(var i = 0; i < tabs.length; i++){
var obj= document.getElementById(tabs[i]);
// Find the correct div
var cldrn = obj.childNodes;
for(var m = 0; m < cldrn.length; m++)
{
if(cldrn[m].id == "common")
{
// Copy the common content over to the tab
var child = cldrn[m];
var cc = document.getElementById("common_stuff");
var ccc = cc.childNodes;
// collect and clone tables
for (var n = 0; n< ccc.length; n++){
if (ccc[n].tagName == "TABLE"){
var tbl = ccc[n].cloneNode(true);
child.appendChild(tbl);
for (r=0;r<tbl.rows.length;r++){
var row = tbl.rows[r];
for (c=0; c< row.cells.length;c++){
var cell = row.cells[c];
var inputs = cell.childNodes;
for (s=0;s< inputs.length; s++){
if(inputs[s].tagName == "INPUT"){
inputs[s].id= tabs[i] +'_' + inputs[s].id;
inputs[s].name= tabs[i] +'_' + inputs[s].name;
}
}
}
}
}
}
break;
}
}
}
}
// run our loader
// if(typeof aciOnload=='function')aciOnload();
</script>
</head>
<body onload='aciOnload()'>
<h1>Tabbed Form</h1>
<hr/>
<div class="tabs">
<a class="tab" onclick="showTab('tab1')">Tab One</a>
<a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>
<form name="myForm" action="#" >
<!-- note that for the first tab we need to
manually set the display to visible -->
<div id="tab1" class="tabContent" style="display:block">
<div id="common" >
</div>
</div>
<div id="tab2" class="tabContent">
<div id="common" >
</div>
</div>
<input type="submit" action="http://example.com/" method="post">
</form>
<div id="common_stuff" class="common_stuff" >
<table>
<tr>
<td>Field One: </td>
<td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
</tr>
<tr>
<td>Field Two: </td>
<td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
</tr>
<tr>
<td>Field Three: </td>
<td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
</tr>
</table>
</div>
<hr>
</body>
</html>
您能否請至少說明兩個標籤顯示您當前的結構或其縮減版本？當你說「每個命名標籤都有一個公共的在一個公用的div中定義的輸入集合」時，你的意思是說多個標籤有映射到同一個公共字段的字段？這似乎不符合從所有選項卡提交所有字段的要求。 – nnnnnn 2012-03-04 01:56:54
不管你在div裏面有什麼，無論是否隱藏。重要的是元素，如複選框，文本，隱藏等.. btw聽起來像你正在尋找jQuery UI標籤？ http://jqueryui.com/demos/tabs – robert 2012-03-04 01:58:27
如果你把你的標籤包裝在一個表單中，是不是隻是一個獲得表單上所有輸入的情況？ http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery – 2012-03-04 01:58:52