2013-03-12 7 views
0

Я генерации HTML таблицу с 2 столбцами из массива PHP следующим образом:Как привести динамически сгенерированную таблицу HTML в массив JS?

<table> 
    <?php 
    $i=0 
    foreach ($fullNameArray as $namePair){ 
     echo 
     "<tr> 
      <td id='first ".$i."'>".$namePair[0]."</td> 
      <td id='last".$i."'>".$namePair[1]."</td> 
     </tr>"; 
     $i++; 
    } 
    ?> 
</table> 

Что такое лучший способ изучить таблицу в Javascript, например, чтобы создать массив, который будет копировать массив PHP , т. е. массив пар [имя, фамилия].

ответ

1

Если вы хотите использовать старомодный метод чистого JavaScript, вы можете сделать простой прогон DOM.

Если вы добавите id в таблицу, ваша жизнь будет намного проще, особенно если вы добавили (или позже добавили) другие таблицы на странице.

<table id="nameTable"> 
    ... 
</table> 

Теперь вы можете получить доступ к таблице в JavaScript и сохранить ссылку на нее в переменной. Вы также захотите инициализировать пустую переменную array/list, чтобы удерживать имена позже.

var nameTable = document.getElementById("nameTable"); 
var nameArray = []; 

Далее вы начинаете цикл через дочерние элементы таблицы, каждая из которых будет элемент tr (строка таблицы).

for (var i=0; i<nameTable.childNodes.length; i++) { 
    ... 
} 

Внутри этого цикла for вы будете строить свой список [фамилия, имя] пар. Вы сделаете это, захватив значение каждой из двух дочерних ячеек td (таблица данных) текущей строки.

var dataCells = nameTable.childNodes[i].childNodes; 
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML]; 

Это должно дать вам JSON массив что-то вроде этого (добавили мои ценности):

[ 
    ["Andy", "Jackson"], 
    ["Barry", "Obama"], 
    ["Benny", "Franklin"], 
    ["Georgey", "Washington"], 
    ["Billy", "Clinton"] 
] 

Для обзора, полный код будет выглядеть примерно так:

var nameTable = document.getElementById("nameTable"); 
var nameArray = []; 

for (var i=0; i<nameTable.childNodes.length; i++) { 
    var dataCells = nameTable.childNodes[i].childNodes; 
    var namePair = [dataCells[0].innerHTML, dataCells[1].innerHTML]; 
} 

ПРИМЕЧАНИЕ: Это забавно, но вполне вероятно, что лучшее решение, если вы не возражаете против жестко закодированного массива JSON в исходном коде (если у вас есть таблица там, в любом случае это r не имеет значения), возможно, напечатать массив json_encode d в теге <script> прямо с PHP, как предположил @JayBhatt. Скорее всего, это более быстрый метод, и он значительно снижает нагрузку на браузер пользователя.

+0

Спасибо, я думаю, что отвечает на мой вопрос. Мне нужно лучше изучить DOM ... – JDelage

+0

Я получаю ошибку типа - nameTable null. Я попытался поместить код внутри 'window.onload', чтобы убедиться, что я не пытался получить ссылку до ее загрузки, но это не имеет никакого значения ... – JDelage

+0

Вы добавили' id = "nameTable" 'на свой '

' tag? Кроме того, в вашем вызове 'getElementById', это в кавычках? –

1

Кодируйте массив Json с использованием json_encode РНР, присвоить эту строку в переменную JavaScript и декодирование JSON в массив с помощью JavaScript ...

1

Другого способа может быть присвоить JSON к скрытому входу вместо этого яваскрипта и позже получите входное значение в вашем javascript-коде.

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