javascript - 在 Javascript/jQuery 中生成表格

标签 javascript jquery html-table

<分区>

Possible Duplicate:
Creating tables dynamically in jQuery

我有两个数组,letters = [A,B,C,...]numbers = [1,2,3,...],并想生成一个 html 表,其中 numbers 作为标题,letters 作为第一个条目(然后我可以用我拥有的值填充它)。 这对于一般数组可能吗?

即如下图:

<table>
   <thead>
     <tr>
       <th></th>
       <th>1</th>
       <th>2</th>
       <th>3</th>
     </tr>
   </thead>
   <tbody>
     <tr id="A">
       <td>A</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr id="B">
       <td>B</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr id="C">
       <td>C</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
   </tbody>
 </table>​

最佳答案

好的,这是我想到的第一种方式:

var letters = ["A","B","C"],
    numbers = [1,2,3],
    $table = $("<table/>"),
    $body = $("<tbody/>").appendTo($table),
    $row = $("<tr><th></th></tr>");

$.each(numbers,function(i,val){
  $("<th/>").text(val).appendTo($row);
});
$("<thead/>").append($row).appendTo($table);

$.each(letters, function(i,val) {
  $row = $("<tr/>").attr("id",val).appendTo($body);
  $("<td/>").text(val).appendTo($row);
  for (var j = 0; j < numbers.length; j++)
    $row.append("<td/");
});

$table.appendTo("body");

演示:http://jsbin.com/ocomit/edit#javascript,html,live

是的,它可以更漂亮和/或更高效。这仅使用非常基本的 jQuery 方法 - 如果您不确定其中的任何一个,您知道 where to look ...

关于javascript - 在 Javascript/jQuery 中生成表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11502711/

相关文章:

jquery - Sublime 视频播放器无法在 IE9 中调整大小

javascript - 如何在 JavaScript 中运行随机选择的函数?

HTML 表单不适用于内部表格

javascript - 使用 serializeArray,尝试从 ajax 插入多个输入,每个输入都有 ID

java - EventSource 中的错误处理

javascript - .getElementsByClassName 不起作用?

html - <td> 内 <div> 的宽度变化改变了 <td>-width

javascript - ElectronJS : Uncaught TypeError: ipcRenderer. 不是一个函数

javascript - JQuery - 只需走进主要的 li 元素

python - 如何遍历整个html表并转换为json数据?