DOM y tablas

vmac179 · #1 (**permalink**) 05/11/2008, 22:16

Hola amigos que tal ?? espero que bien

bueno después de saludar les expongo mi duda, que es la siguiente

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>DOM con tablas</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script>

   var cont=1;

        function addrow(tc1,tc2) {

                var tbl = document.getElementById('tabla');

                var row = document.createElement('tr');

                var c0 = document.createElement('td')

      c0.innerHTML=cont;

      cont++;

                var c1 = document.createElement('td')

      c1.innerHTML=tc1;

                var c2 = document.createElement('td')

                var c3 = document.createElement('td')

                var c4 = document.createElement('td')

                var c5 = document.createElement('td')

      c2.innerHTML=tc2;

                row.appendChild(c0);

                row.appendChild(c1);

                row.appendChild(c2);

                row.appendChild(c3);

                row.appendChild(c4);

                row.appendChild(c5);

                tbl.appendChild(row);

        }

 

        function addrow2() {

           var frm = document.getElementById('forma');

           addrow(frm.c1.value,frm.c2.value,frm.c3.value);

        }

</script>

</head>

<body>

<h2>Demo de DOM con tablas</h2>

<form id='forma'>

Columna 1:<input type="text" name="c1">

Columna 2:<input type="text" name="c2">

Columna 3:<input type="text" name="c3">

Columna 4:<input type="text" name="c4">

Columna 5:<input type="text" name="c5">

<input type="button" value="add"  onclick="javascript:addrow2()">

<input type="reset">

</form>

<br/>

<table cellpadding="0" cellspacing="0" border="1"  id="tabla">

<tr>

<td></td><th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th>

</tr>

</table>

<hr>

</body>

</html>

resulta que me esta mostrando solo los primeros valores osea, 0-1-2 y los otros no :(

mi duda es como hacerlo o que tiene mal el codigo

de antemano muchas gracias
Salu2

foreverOdd · #2 (**permalink**) 06/11/2008, 09:05

Y como pensaste que te iba a insertar klos otros valores??? por arte de magia???

aqui esta el codigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM con tablas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var cont=1;
function addrow(tc1,tc2,tc3,tc4,tc5) {
var tbl = document.getElementById('tabla');
var row = document.createElement('tr');
var c0 = document.createElement('td')
c0.innerHTML=cont;
cont++;
var c1 = document.createElement('td')
c1.innerHTML=tc1;
var c2 = document.createElement('td')
var c3 = document.createElement('td')
var c4 = document.createElement('td')
var c5 = document.createElement('td')
c2.innerHTML=tc2;
c3.innerHTML=tc3;
c4.innerHTML=tc4;
c5.innerHTML=tc5;
row.appendChild(c0);
row.appendChild(c1);
row.appendChild(c2);
row.appendChild(c3);
row.appendChild(c4);
row.appendChild(c5);
tbl.appendChild(row);
}

function addrow2() {
var frm = document.getElementById('forma');
addrow(frm.c1.value,frm.c2.value,frm.c3.value,frm. c4.value,frm.c5.value);
}
</script>
</head>
<body>
<h2>Demo de DOM con tablas</h2>
<form id='forma'>
Columna 1:<input type="text" name="c1">
Columna 2:<input type="text" name="c2">
Columna 3:<input type="text" name="c3">
Columna 4:<input type="text" name="c4">
Columna 5:<input type="text" name="c5">
<input type="button" value="add" onclick="javascript:addrow2()">
<input type="reset">
</form>
<br/>
<table cellpadding="0" cellspacing="0" border="1" id="tabla">
<tr>
<td></td><th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th>
</tr>
</table>
<hr>
</body>
</html>

solo copia y pega, de nuevo

Suerte

vmac179 · #3 (**permalink**) 06/11/2008, 11:37

uffff muchas gracias.... me salvaste aunque le había hecho una modificacion mira te la dejo

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM con tablas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
   var cont=1; // numero de la fila
        function addrow(tc1,tc2,tc3,tc4,tc5) {
                var tbl = document.getElementById('tabla');
                var row = document.createElement('tr');
                var c0 = document.createElement('td')
      c0.innerHTML=cont;
      cont++;
                var c1 = document.createElement('td')
      c1.innerHTML=tc1;

                var c2 = document.createElement('td')
      c2.innerHTML=tc2;

                var c3 = document.createElement('td')
      c3.innerHTML=tc3;

                var c4 = document.createElement('td')
      c4.innerHTML=tc4;

                var c5 = document.createElement('td')
      c5.innerHTML=tc5;

      c1.innerHTML=tc1;
                row.appendChild(c0);
                row.appendChild(c1);
                row.appendChild(c2);
                row.appendChild(c3);
                row.appendChild(c4);
                row.appendChild(c5);
                tbl.appendChild(row);
        }
 
        function addrow2() {
           var frm = document.getElementById('forma');
           addrow(frm.c1.value,frm.c2.value,frm.c3.value,frm.c4.value,frm.c5.value); // celdas
        }
</script>
</head>
<body>
<h2>Demo de DOM con tablas</h2>
<form id='forma'>
Columna 1:<input type="text" name="c1">
Columna 2:<input type="text" name="c2">

Columna 3:<input type="text" name="c3">
Columna 4:<input type="text" name="c4">
Columna 5:<input type="text" name="c5">
<input type="button" value="add"  onclick="javascript:addrow2()">
<input type="reset">
</form>
<br/>
<table cellpadding="0" cellspacing="0" border="1"  id="tabla">
<tr>
<td></td><th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th>

</tr>
</table>
<hr>
</body>
</html>

a todo esto alguien sabe porque no funciona en IE ???