2016-03-07 2 views
-4

Я изо всех сил пытаюсь понять, как перебирать таблицу в HTML.Цитирование через HTML-таблицу с помощью Javascript/jQuery

У меня есть объект 2D Javascript, который я бы хотел заполнить ячейками index i,j от myObject[i][j]. У меня есть базовый шаблон таблицы html, но с пустыми <td></td> тегами. Я рассмотрел способы сделать это в jQuery и Javascript, но безрезультатно.

Edit: Вот мой код:

var table = document.getElementById("myTable"); 
for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    col = myObject[i][j] 
    } 
} 

Мой HTML это просто стандартная таблица, например .:

<table id="myTable"> 
     <thead> 
      <tr> 
      <th></th> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <th></th> 
      <td></td> 
     </tbody> 
     </table> 

Любая помощь будет принята с благодарностью.

+2

показать нам больше коды и то, что вы пытались сделать – depperm

+0

Мы не можем помочь вам отлаживать код без * * Вашего видения кода ... –

+0

Так что вы хотите, чтобы заполнить таблицу от объекта? –

ответ

0

Решение jQuery может использовать child related selectors для фильтрации соответствующих ячеек.

var ar = [ 
 
    ['A', 'B'], 
 
    ['C', 'D'] 
 
]; 
 
for (var r = 0; r < 2; ++r) { 
 
    for (var c = 0; c < 2; ++c) { 
 
    $('table tr:nth-of-type(' + (r + 1) + ') td:nth-of-type(' + (c + 1) + ')').text(ar[r][c]); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>.</td> 
 
    <td>.</td> 
 
    </tr> 
 
    <tr> 
 
    <td>.</td> 
 
    <td>.</td> 
 
    </tr> 
 
</table>

+1

Неправильная практика доступа к узлам DOM в цикле (для, пока ...). Это значительно замедляет ваш код. jQuery пытается найти выбранный узел в каждом цикле, который может быть довольно медленным. Кроме того, этот селектор jQuery не очень читабельен, особенно когда вы возвращаетесь к своему коду через некоторое время. – bulicmatko

+0

Вы совершенно правы, и я бы не поставил этот код в производственный контекст. Во всяком случае, цель заключалась только в том, чтобы предоставить какое-то доказательство концепции. – Dfaure

0

Благодаря @bulicmatko

Вы можете попробовать что-то вроде этого: jsfiddle.net/pt9go1s6

+0

Я разместил это как ответ :) – bulicmatko

0

Вы можете попробовать что-то вроде этого:

HTML:

<div id="tableWrap"></div> 

JS:

var tableWrap = document.getElementById("tableWrap"); 

var data = [ 
    ['First Name', 'Last Name', 'Age'], 
    ['Johnny', 'Bravo', '27'], 
    ['Bugs', 'Bunny', '35'], 
    ['Mickey', 'Mouse', '35'], 
]; 

var table = "<table>"; 

for (var i = 0; i < data.length; i++) { 
    table += "<tr>"; 
    for (var j = 0; j < data[i].length; j++) { 
     table += "<td>" + data[i][j] + "<td>"; 
    } 

    table += "</tr>"; 
} 

table += "</table>"; 

tableWrap.innerHTML = table; 

Вот demo.

Надеется, что это помогает;)

Смежные вопросы