The problem is that when using the table in the different tabs it doesnt add the new row in the correct tab. Any suggestions?
Code:
<html>
<head>
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script language="JavaScript">
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "empNo";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.setAttribute("name","mytextarea");
element3.setAttribute("cols","10");
element3.setAttribute("rows","1");
cell3.appendChild(element3);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount > 1) {
table.deleteRow(rowCount - 1);
}
}
</script>
<script language="JavaScript">
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "empNo";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.setAttribute("name","mytextarea");
element3.setAttribute("cols","10");
element3.setAttribute("rows","1");
cell3.appendChild(element3);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount > 1) {
table.deleteRow(rowCount - 1);
}
}
</script>
<h3>Athletic-Profile</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 5</a></li>
<li><a href="#" rel="country5">Tab 6</a></li>
<li><a href="#" rel="country6">Tab 7</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent"> Tab content 1 here
<form name="form1" method="post" action="">
<input name="button" type="button" onClick="addRow('datatable')"value="Add">
<table id="datatable" cellspacing="0" border="1" bgcolor="#738711">
<tbody>
<tr>
<td><input name="text" type="text" ></td>
<td><input name="text" type="text"></td>
<td><textarea name="textarea" cols="10" rows="1"></textarea></td>
<td><a href="javascript:void(0);" onClick="deleteRow('datatable')" >Remove</a></td>
</tr>
</tbody>
</table>
</form>
<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent"> Tab content 2 here
<form name="f1" id="f1">
<input name="button2" type="button" onClick="addRow('datatable')"value="Add">
<table id="datatable" cellspacing="0" border="1" bgcolor="#738711">
<tbody>
<tr>
<td width="144"><input name="text2" type="text" ></td>
<td width="144"><input name="text2" type="text"></td>
<td width="95"><textarea name="textarea2" cols="10" rows="1"></textarea></td>
<td width="50"><a href="javascript:void(0);" onClick="deleteRow('datatable')" >Remove</a></td>
</tr>
</tbody>
</table>
</form>
<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
<div id="country5" class="tabcontent">
Tab content 5 here<br />Tab content 5 here<br />
</div>
<div id="country6" class="tabcontent">
Tab content 6 here<br />Tab content 6 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>
<hr />
</head>
</html>
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
<hr />
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>