Need a little help please

Jt3689 · 11-13-2012, 01:12 AM

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>

DanInMa · 11-19-2012, 02:40 PM

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.