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?

[Duncan Booth]

fj****@gmail.com wrote:

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?

I don't know what you tried, but IE supports the 'text' attribute just
fine. This should work equally well on either browser:

var selectsexo = document.createElement("select");
var masculino = document.createElement("option");
masculino.value = "M";
masculino.text="Masculino";
var femenino = document.createElement("option");
femenino.value = "F";
femenino.text="Femenino";
selectsexo.options.add(masculino);
selectsexo.options.add(fememino);

Or reduce the repetition by using a loop:

var selectsexo = document.createElement("select");
var options = [["M", "Masculino"], ["F", "Femenino"]];
for (var i=0; i < options.length; i++) {
var opt = document.createElement("option");
opt.value = options[i][0];
opt.text = options[i][1];
selectsexo.options.add(opt);
}

[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]

<fj****@gmail.com> schreef in bericht
news:11**********************@g10g2000cwb.googlegr oups.com...

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]

fj****@gmail.com wrote:

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.

<URL:http://developer.mozilla.org/en/docs/DOM:table#Methods>

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/comp.lang.javascript/browse_frm/thread/226caadb3bd3ca60/61dc315bf5d3baea?q=new+option+text+value+robg&rnum =1#61dc315bf5d3baea>

--
Rob