Menu
Hi all,
I am new to JavaScript in the grand scheme of things. I have been dabbling for about 1 month now. Mainly looking at other peoples code and trying to figure out how it works. I now find myself in need of creating a specific code. I want to create a table that contains the following elements:
a text box (input)
3 select inputs (all 3 using different values)
and a check box.
I want the initial table to be set up with a button under it that allows me to add new lines with the above pre-defined content. I started out small and got it working with text in 1 cell and a select in the other. When I tried to add a text box (input) in the first cell it all went a bit wrong.
Here is my code so far:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<SCRIPT LANGUAGE=”JavaScript”>
function addRow(id){
var tbody = document.getElementById(id)
var row = document.createElement(“TR”)
var td1 = document.createElement(“TD”)
//td1.appendChild(document.createTextNode(“row 2_column 1”))
var textbox = document.createElement(“input”)
textBox.type = “text”
textBox.size = “50”
//td1.appendChild (textBox)
var td2 = document.createElement(“TD”)
//Creating a Select Box
var selectBox = document.createElement(“Select”)
selectBox.name=”mySelectBox”
selectBox.options[selectBox.options.length]=new Option(“Banana”,”1″)
selectBox.options[selectBox.options.length]=new Option(“Melon”,”2″)
selectBox.options[selectBox.options.length]=new Option(“Orange”,”3″)
td1.appendChild (textBox)
td2.appendChild (selectBox)
row.appendChild(td1)
row.appendChild(td2)
tbody.appendChild(row)
}
</script>
</head>
<body>
<a href=”javascript:addRow(‘myTable’)”>Add row</a>
<table id=”myTable” cellspacing=”0″ border=”1″>
<tr>
<td>row1_column1</td><td>row1_column1</td>
</tr>
</table>
</body>
</html>
Please can anyone point out what I have done wrong, as I said I am new to all this so am still learning.
Thanks