He intentado ejecutar un Javascript bucle para crear una tabla con los valores de un array:
I anexa el texto de un nodo y trató de que el nodo de texto serán los valores de la matriz, uno por td para la longitud.
Este es mi código hasta el momento, sólo crear una celda con «undefined» valor»:

function addtd(){
      var table1 = document.getElementsByTagName('table')[0];
      var rowrow =  document.createElement('tr');
      var foods = new Array();

      foods[0] = "milk" ;`enter code here`
      foods[1] = "meat" ;
      foods[2] = "fruit" ;
      foods[3] = "fish" ;
      foods[4] = "salad" ;

      for ( var i=0;i<foods.length;i++)

      var cell1  =  document.createElement('td').innerHTML = 'foods[i]';    
      var text1 = document.createTextNode(foods[i]) ;

      cell1.appendChild(text1);
      rowrow.appendChild(cell1);
      table1.appendChild(rowrow);
      }

       <div id="divfood"> </div>
       <button onclick="addtd()">Click me</button>`enter code here`
       <table border="2" id="tabletable" cellspacing="5" >
       </table>   
InformationsquelleAutor Gambrinus | 2012-12-27

3 Comentarios

  1. 2

    Que me gustaría cambiar este –

    var cell1  =  document.createElement('td').innerHTML = 'foods[i]'; 

    a

    var cell1  =  document.createElement('td');
    cell1.innerHTML = 'foods[i]'; 

    Yo no esperaría que la celda1 se establecerá correctamente cuando se encadenar su innerHTML en línea para celda1, pero no lo he probado.

    • Me gustaría zanja las comillas alrededor de foods[i] así, ya que esto va a imprimir la cadena foods[i] literalmente.
    • De acuerdo, que era una escalera de copiar/pegar.
    • gracias! Voy a tratar de trabajar en él como usted sugiere.
  2. 1

    Algo como esto creará un bucle a través de su matriz y crear una fila de ella, ya que parece ser lo que usted está tratando de hacer.

    var foods = ["milk", "eggs", "lettuce", "tomato"],
        food,
        row = document.createElement("tr");
    
    while (food = foods.shift()) {
        var el = document.createElement("td");
            el.innerText = food;
    
        row.appendChild( el );
    }
    
    document.getElementsByTagName("table")[0].appendChild(row);
  3. 1

    Tiene varios errores en su código como la falta de apoyos de todo el for bucle y raras 'enter code here' oración en la 6ª línea. También se olvidó de poner el código JavaScript dentro de la <script> etiqueta. Aquí está la versión de trabajo de su código:

    <script>
    function addtd(){
        var table1 = document.getElementsByTagName('table')[0];
        var rowrow =  document.createElement('tr');
        var foods = new Array();
    
        foods[0] = "milk" ;
        foods[1] = "meat" ;
        foods[2] = "fruit" ;
        foods[3] = "fish" ;
        foods[4] = "salad" ;
    
        for ( i=0; i <foods.length; i++) {
            var cell1  =  document.createElement('td');
            var text1 = document.createTextNode(foods[i]);
            cell1.appendChild(text1);
            rowrow.appendChild(cell1);
        }
        table1.appendChild(rowrow);
    }
    </script>
    
    <div id="divfood"> </div>
    <button onclick="addtd()">Click me</button>
    <table border="2" id="tabletable" cellspacing="5" >
    </table>

    Aquí es el jsFiddle demo.

Dejar respuesta

Please enter your comment!
Please enter your name here