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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a little help please

    Trying to create a form where with 1 button on the main screen, when clicked, adds a new tab form. But if a button is pressed in the tab it self it creates a new line. Im having trouble getting to produce a new line only in the tab itself that got clicked.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title> Add/Remove dynamic rows IN HTML table </title>
    <link rel="stylesheet" href="http://web.archive.org/web/20101008055507cs_/http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/style.css" type="text/css" media="screen" />
    <script src="http://web.archive.org/web/20101008055507js_/http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/scripts/jquery-1.2.3.min.js"></script>
    <script>
    	
    	  // When the document loads do everything inside here ...
    	  $(document).ready(function(){
    		
    		// When a link is clicked
    		$("a.tab").click(function () {
    			
    			
    			// switch all tabs off
    			$(".active").removeClass("active");
    			
    			// switch this tab on
    			$(this).addClass("active");
    			
    			// slide all content up
    			$(".content").slideUp();
    			
    			// slide this content up
    			var content_show = $(this).attr("title");
    			$("#"+content_show).slideDown();
    		  
    		});
    	
    	  });
      </script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript">
            function addRow(tableID) {
     
                var table = document.getElementById(tableID);
     
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
     
                var cell1 = row.inserCell(Excercise 2);
                var element1 = document.createElement("input");
                element1.type = "checkbox";
                cell1.appendChild(element1);
     
                var cell2 = row.insertCell(1);
                cell2.innerHTML = rowCount + 1;
     
                var cell3 = row.insertCell(2);
                var element2 = document.createElement("input");
                element2.type = "text";
                cell3.appendChild(element2);
    			
    			var cell3 = row.insertCell(3);
                var element2 = document.createElement("input");
    			var element2 = document.createElement(style2.css);
                element2.type = "text";
                cell3.appendChild(element2);
     
     
            }
     
            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
     
                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
     
     
                }
                }catch(e) {
                    alert(e);
                }
            }
     
        </script>
    <script language="javascript">
            function addRow(tableID) {
     
                var table = document.getElementById(tableID);
     
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
     
                var colCount = table.rows[0].cells.length;
     
                for(var i=0; i<colCount; i++) {
     
                    var newcell = row.insertCell(i);
     
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "text":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
     
            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
     
                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                        if(rowCount <= 1) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
     
     
                }
                }catch(e) {
                    alert(e);
                }
            }
     
        </script>
    <script language="javascript">
            function addRow(tableID) {
     
                var table = document.getElementById(tableID);
     
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
     
                var colCount = table.rows[0].cells.length;
     
                for(var i=0; i<colCount; i++) {
     
                    var newcell = row.insertCell(i);
     
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
     
            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
     
                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                        if(rowCount <= 1) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
     
     
                }
                }catch(e) {
                    alert(e);
                }
            }
     
        </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";
    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","20");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
    }
    </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";
    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","20");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
    }
    </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";
    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","20");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
    }
    </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";
    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","20");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
    }
    </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 = "checkbox";
                   cell1.appendChild(element1);
     
                   VAR cell2 = row.insertCell(1);
                   cell2.innerHTML = rowCount + 1;
     
                   VAR cell3 = row.insertCell(2);
                   VAR element2 = document.createElement("input");
                   element2.type = "text";
                   cell3.appendChild(element2);
     
              }
     
              FUNCTION deleteRow(tableID) {
                   TRY {
                   VAR table = document.getElementById(tableID);
                   VAR rowCount = table.rows.length;
     
                   FOR(VAR i=0; i<rowCount; i++) {
                        VAR row = table.rows[i];
                        VAR chkbox = row.cells[0].childNodes[0];
                        IF(NULL != chkbox && TRUE == chkbox.checked) {
                             table.deleteRow(i);
                             rowCount--;
                             i--;
                        }
     
                   }
                   }CATCH(e) {
                        ALERT(e);
                   }
              }
     
         </script>
    </head>
    
    <body>
    
    
    <div id="tabbed_box_1" class="tabbed_box">
    	
      <h4>Athletic-Profile</h4>
        <div class="tabbed_area">
        
        	
            <ul class="tabs">  
          <li class="tabbed_area"><a href="#" title="content_1" class="tab active">Excercise 
            1</a></li>
          <li class="tabbed_area"><a href="#" title="content_2" class="tab">Excercise 
            2</a></li>
          <li class="tabbed_area"><a href="#" title="content_3" class="tab">Excercise 
            3</a></li>  
    </ul>
        <div id="content_1" class="content"> 
          <ul>
            <p> 
              <input name="button" type="button" onclick="addRow('dataTable')" value="Add Set" />
              <input name="button2" type="button" onclick="deleteRow('dataTable')" value="Delete Set" />
            </p>
            <p>&nbsp; </p>
            <table id="dataTable" width="451" border="1">
              <tr> 
                <td width="59"><input type="checkbox" name="chk"/></td>
                <td width="134"><input name="txt" type="text" value="Reps" size="10"/></td>
                <td width="236"><input name="txt2" type="text" value="Sets" size="10"/> </td>
              </tr>
            </table>
            <p>&nbsp; </p>
            <li> </li>
            <li></li>
          </ul>
            </div>
        <div id="content_2" class="content"> 
          <ul>
            <li>
              <form name="f1" id="f1">
                <input name="button3" type="button" onclick="addRow('datatable')" value="Add" />
                <table id="datatable" cellspacing="0" border="1">
                  <tbody>
                    <tr> 
                      <td><input name="text3" type="text" /></td>
                      <td><input name="text3" type="text" /></td>
                      <td><input name="text32" type="text" /></td>
                    </tr>
                  </tbody>
                </table>
              </form>
              <p>&nbsp; </p>
            </li>
          </ul>
            </div>
        <div id="content_3" class="content"> 
          <ul>
            <li></li>
          </ul>
            </div>
        
        </div>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    You need to fix alot of issues before you attempt any further changes.

    1. you are using a very old version of jQuery, Id advise you use 1.8.2

    2. language="javascript" is deprecated, especially in xhtml ( should be type="text/javascript" )
    3. you have redefined the same functions over 5 times, why??

    4. your html is malformed quite a bit, especially in content_1

    i'd advise you run your current code through the w3c validator, fix the major issues first before continuing on.


  •  

    Tags for this Thread

    Posting Permissions

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