2014-12-16 2 views
0

У меня есть эта таблица, которую я создаю в div. При нажатии кнопки таблица создается внутри div. Это HTML код я использую для создания пуста DIV, когда страница открывается:При создании таблицы внутри div. Текст «undefined» появляется без причины

<div id="historyTableDiv">  
</div> 

Это Java-код я исполняю, когда кнопка нажата, чтобы создать таблицу внутри DIV:

function createTable() 
{ 
    var text = 'ID: TEST<br>'; 
    var thead = '<table><thead><tr><td>#</td><td>Name</td></tr></thead><tbody>'; 
    var tbody = '<tr>'; 
    tbody += '<td>Test ID</td>';   
    tbody += '<td>Test Name</td>'; 
    var tfooter = '</tr></tbody></table>'; 
    document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter; 
} 

Таблица создана просто отлично. Единственная проблема заключается в том, что текст "undefined" отображается между текстом "ID: TEST" и таблицей. Я не знаю, откуда это.

Дополнительная информация: У меня есть 6 divs на моей странице. Со всеми разными идентификаторами. Я использую функцию createTable(). Чтобы показать ту же таблицу в разных div и выше каждой таблицы, появляется текст «undefined».

Когда я проверяю элемент, я вижу, что атрибут nodeValue этого div имеет значение «undefined», когда я меняю этот текст на «test», вместо «undefined» появляется текст «test».

+0

Вы имеете в виду, что все, что вы хотите, отображается, но также с неопределенным? ничего не пропало? – sam

+1

Невозможно воспроизвести: http://codepen.io/zvona/pen/emzOZN – zvona

+0

попробуйте поставить
вместо
, это может объяснить, почему – sam

ответ

0

Я решил проблему путем редактирования значения первого узла DIV после прохождения содержимого к атрибуту innerHTML. Я до сих пор не знаю, что вызывает это.

document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter; 
document.getElementById('historyTableDiv').childNodes[0].nodeValue = null; 
0

В приведенном выше коде не проблема, может быть проблема в какой-либо другой части. Можете ли вы поделиться своим полным кодом html и js?

Следующий код отлично подходит для меня.

<html> 
 
     <head></head> 
 
     <body> 
 
      <p><button onclick="createTable()">Create Table</button></p> 
 
      <div id="historyTableDiv"> 
 
      </div> 
 
      <script type="text/javascript"> 
 
       function createTable() { 
 
        var text = 'ID: TEST<br>'; 
 
        var thead = '<table><thead><tr><td>#</td><td>Name</td></tr></thead><tbody>'; 
 
        var tbody = '<tr>'; 
 
        tbody += '<td>Test ID</td>';   
 
        tbody += '<td>Test Name</td>'; 
 
        var tfooter = '</tr></tbody></table>'; 
 
        document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter; 
 
       } 
 
      </script> 
 
     </body> 
 
    </html>

+0

Нет другого кода, в котором я изменяю атрибут innerHTML div. – ArabCheese