Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Same code...different tabs

    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>

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    123
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Change onClick="addRow('datatable')" for second tab to different id such as
    onClick="addRow('datatable1')" and rename table id to datatable1
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    123
    Thanks
    0
    Thanked 25 Times in 25 Posts
    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('datatable1')"value="Test">  
          <table id="datatable1" 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>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •