Creating a table in javascript

[fjleon]

Hi, i want to create a table declared inside a <td> , which already
exists as follows:

<tr>
<td id="prueba" colspan="4">
</td>
</tr>

I have a button somewhere calling this script, which i have reduced as
much for this post:

function prueba()
{
var tdpadre = document.getElementById("prueba");
var tabla = document.createElement("table");
tabla.setAttribute("id","tablaaseg");
tabla.setAttribute("name","tablaaseg");
tabla.setAttribute("width","100%");
var cantidadasegurados =
document.getElementById("txtnumbene").value;
for (i=0;i<cantidadasegurados;i++)
{
var row = document.createElement("tr");
var td1 = document.createElement("TD");
var inputnombre = document.createElement("input");
td1.appendChild(inputnombre);
row.appendChild(td1);
tabla.appendChild(row);
}
tdpadre.appendChild(tabla);
}

Documentation:
-Get the td where i am going to insert the table
-Create the table and set some attributes
-Get the value of an input, which contains a number. I will be creating
x numbers of rows, with 1 td inside each row
-The td will have an input inside it, so i create it.
-Append the td as a child of the tr, then the tr as a child of the
table
-Finally, add the table as child of the parent td.

This works on mozilla and opera, but not on IE. I dont get a yellow
icon , it just doesn't do anything.

Can anyone tell me what i am doing wrong?

 

[fjleon]

Ok, apparently IE needs that rows go inside a tbody, otherwise it
doesn't work.
So i added the tbody and it works.

Now, i need to add a <select> with 2 options inside it.

I tried doing it this way:

var td3 = document.createElement("TD");
var selectsexo = document.createElement("select");
var masculino=new Option("MASCULINO","M");
var femenino=new Option("FEMENINO","F");
selectsexo.appendChild(masculino);
selectsexo.appendChild(femenino);
td3.appendChild(selectsexo);

But again, doesn't work on IE.

So i am now doing it like this:

var masculino = document.createElement("option");
masculino.setAttribute("value","M");
masculino.text="Masculino";
masculino.innerText="Masculino";
var femenino = document.createElement("option");
femenino.setAttribute("value","F");
femenino.text="Femenino";
femenino.innerText="Femenino";

Mozilla doesn't support innerText, and IE doesn't support text, so i am
using both.
Is there a better way?

 

[fjleon]

these 2 lines give errors:

selectsexo.options.add(masculino);
selectsexo.options.add(fememino);

http://www.w3schools.com/htmldom/dom_obj_select.asp lists an "add"
function, but doesn't give examples.

 

[Marc]

these 2 lines give errors:

selectsexo.options.add(masculino);
selectsexo.options.add(fememino);

http://www.w3schools.com/htmldom/dom_obj_select.asp lists an "add"
function, but doesn't give examples.

function addOptions(object, oValue, oText) {
var defaultSelected = true; var selected = true;
var optionName = new Option(oText, oValue, defaultSelected, selected)
var length = object.length;
object.options[length] = optionName;
}

object = document.getElementById("yourselect")

 

[RobG]

Ok, apparently IE needs that rows go inside a tbody, otherwise it
doesn't work.
So i added the tbody and it works.

You may find it easier to use inesertRow rather than add a tbody. It
requires a lot less code, e.g.:

var newTable = document.createElement('table');
var newRow = newTable.insertRow(-1);
var newCell = newRow.insertCell(-1);

The table now has a single row and cell and is ready to be added to the
document - no need to explicitly create a tbody, nor to create then add
elements.

Now, i need to add a <select> with 2 options inside it.

I tried doing it this way:

var td3 = document.createElement("TD");
var selectsexo = document.createElement("select");
var masculino=new Option("MASCULINO","M");
var femenino=new Option("FEMENINO","F");
selectsexo.appendChild(masculino);
selectsexo.appendChild(femenino);
td3.appendChild(selectsexo);

But again, doesn't work on IE.

What will work in IE is (wrapped for posting):

var selectsexo = document.createElement("select");
selectsexo.options[selectsexo.options.length] =
new Option("MASCULINO","M");
selectsexo.options[selectsexo.options.length] =
new Option("FEMENINO","F");
td3.appendChild(selectsexo);

There is a relevant thread here:

<URL:http://groups.google.com.au/group/c...ption+text+value+robg&rnum=1#61dc315bf5d3baea>