2013-05-02 3 views
2

Я пытаюсь добавить таблицу в div:как добавить таблицу в DIV

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      function addStuff() { 
       var html = '<table>'; 
       $.each(function() { 
         html += '<tr><td>' + '</td></tr>'; 
         }); 
       html += '</table>'; 
       $("#divResults").append(html); 

      } 
     </script> 
    </head> 
    <body> 
     <div id="divResults"></div> 
     <button onclick="addStuff()">Add Stuff</button> 
    </body> 
</html> 

Но это не работает. Я хочу динамически добавлять таблицу в блок DIV.

ответ

4

Вы хотите добавить таблицу в DIV попробовать это ....

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    function addTable() 

{ 
    $('#divResults').append('<table width="320" border="1"><tr><td colspan="2" rowspan="1">' + " wdw" + '</td></tr><tr><td width="118">' + "sxs" + '</td><td width="186">' + "xs" + '</td></tr></table>'); 
} 

    </script> 
     </head> 
    <body> 
    <div id="divResults"> 
    </div> 
    <button onclick="addTable()">Add Stuff</button> 
    </body> 
    </html> 
+0

Благодаря ... человек... – 2013-05-16 05:48:31

2

Вы используете $.each(), но не передаете какую-либо коллекцию для ее итерации.

// ---v---no collection? 
$.each(function() { 
    html += '<tr><td>' + '</td></tr>'; 
}); 

Обычно вы должны передать массив или что-то в этом роде.

$.each(["foo", "bar", "baz"], function(i, val) { 
    html += '<tr><td>' + val + '</td></tr>'; 
}); 

ДЕМО:http://jsfiddle.net/VLfvv/


Обратите внимание, что это немного отличается от .each() метода, который работает на объекте JQuery, так что члены объекта становится значением.

$(".foobar").each(function(i, el) { 
    // do something with the element 
}); 

отметить также, что, если все, что вы хотите, чтобы добавить эту пустую таблицу, она легко может быть сделано без JQuery.

function addStuff() { 
    var html = '<table>'; 
    for (var i = 0; i < 10; i++) 
     html += '<tr><td>' + '</td></tr>'; 

    html += '</table>'; 

    document.getElementById("divResults") 
      .insertAdjacentHTML("beforeend", html); 
} 
5

each что? Ваш метод $.each должен зациклиться на чем-то. например

function addStuff() { 
 
    var words = ['one', 'two', 'three']; 
 

 
    var html = '<table>'; 
 

 
    $.each(words, function(i, word) { 
 
    html += '<tr><td>' + word + '</td></tr>'; 
 
    }); 
 

 
    html += '</table>'; 
 

 
    $("#divResults").append(html); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="divResults"></div> 
 
<button onclick="addStuff()">Add Stuff</button>

0

Вы должны использовать следующее:

var myTable = document.createElement("img"); 

var row1 = gameGrid.insertRow(0); 
var row2 = gameGrid.insertRow(1); 

var col1 = row1.insertCell(0); 
var col2 = row2.insertCell(1); 

col1.innerText = "some thing"; 

document.getElementById("divResults").innerHtml = myTable; 
Смежные вопросы