Блог

Главная - Вопросы по программированию - Не удается установить границу моей таблицы через javascript

Не удается установить границу моей таблицы через javascript

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь добавить границу к моей таблице с помощью Javascript. Но я получаю сообщение об ошибке

 "Cannot set property border of undefined"

при отладке через Chrome.

Ниже приведен фрагмент кода:

  var table = "<table>";
 table.style.border="1px solid red"; // Getting error here

 var content="";
 content  = "<tr><th>"   "Booking Id"   "</th> ";
 content  = " <th>"   "CCA Sent"   "</th> ";
 content  = " <th>"   "CCA Acknowledged"   "</th> ";
 content  = "<th>"   "Folio Received"   "</th></tr>";
 content  = "</table>";

 table  = content;

$(document.body).append(table);

Я погуглил это, и было сказано, что наиболее распространенная причина связана с неинициализированной переменной, но, похоже, это не в моем случае.

Пожалуйста, помогите мне решить это!

Ответ №1:

Когда вы пытаетесь установить свойство style для таблицы, это просто ошибка. У него нет никакого свойства style, потому что таблица еще не существует в DOM. Установите свойство style после добавления таблицы в DOM:

 var table = "<table id='myTable'>";
var content="";
content  = "<tr><th>"   "Booking Id"   "</th> ";
content  = " <th>"   "CCA Sent"   "</th> ";
content  = " <th>"   "CCA Acknowledged"   "</th> ";
content  = "<th>"   "Folio Received"   "</th></tr>";
content  = "</table>";

table  = content;

$(document.body).append(table);
document.getElementById('myTable').style.border="1px solid red";  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответ №2:

Ошибка заключается в том, что table содержит строку, следовательно table.style возвращает undefined, и вы не можете установить border свойство undefined .

Для решения этой проблемы вам нужно table сослаться на элемент. Поскольку вы уже используете jQuery, вы можете сделать это, создав объект jQuery и добавив его в DOM. Также обратите внимание, что обычно считается лучшей практикой добавлять классы CSS к элементам в JS вместо изменения их встроенного стиля. Попробуйте это:

 var $table = $("<table><tr><th>Booking Id</th><th>CCA Sent</th><th>CCA Acknowledged</th><th>Folio Received</th></tr></table>").appendTo('body');

$table.addClass('foo');  
 table.foo {
  border: 1px solid red
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Комментарии:

1. И вместо $table.addClass('foo'); мы можем иметь class уже в разметке, учитывая, что пользователь не меняет ее после некоторого события..

2. @Rayon очень верно, хотя я оставил это отдельно в примере, поскольку из контекста вопроса кажется, что OP пытается добавить стиль после создания таблицы.

3. Да.. Понял 👍

Ответ №3:

  var table = document.getElementById("your_table_id");
 table.style.border="1px solid red"; // Getting error here

 var content="<table>";
 content  = "<tr><th>"   "Booking Id"   "</th> ";
 content  = " <th>"   "CCA Sent"   "</th> ";
 content  = " <th>"   "CCA Acknowledged"   "</th> ";
 content  = "<th>"   "Folio Received"   "</th></tr>";
 content  = "</table>";



$('body').append(content)

Ответ №4:

 var content="<table id='some_id'>";
 content  = "<thead><tr><th>"   "Booking Id"   "</th> ";
 content  = " <th>"   "CCA Sent"   "</th> ";
 content  = " <th>"   "CCA Acknowledged"   "</th> ";
 content  = "<th>"   "Folio Received"   "</th></tr>";
 content  = "</thead></table>";

$("body").append(content)

var table = document.getElementById('some_id')
table.style.border="1px solid red";