Добавить атрибут в динамически созданную таблицу

Question

Helo,

Я работаю с внешним программным обеспечением, которое генерирует отчеты. Я получаю таблицу, затем она распечатывается на сайте в div. У меня нет доступа к этой таблице до ее создания, поэтому я не могу установить какой-либо атрибут до отображения веб-сайта.

Так что мне нужно добавить атрибут в эту таблицу как последний шаг процесса рендеринга, не имеет значения, это ID или класс.

Структура как:

 <div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

Я использую IE v11.

Я пробовал что-то вроде этого (ничего не происходит):

  document.getElementById("Checklist").childNodes[0].className = "TestClassName";

Также (это дает ошибку mi: объект не поддерживает свойство или метод 'setAttribute')

 document.getElementById('news').childNodes[0].setAttribute( 'class', new_class );

Есть еще идеи?

Answer 1

Предполагая, что это ваш код,

<div class="data" id="Checklist">
    <p>Some Text</p>
    <div id="WhereTableWillGo">
        <table></table>
    </div>
    <p></p>
</div>

Вы можете сделать изменения в функции window.onload,

window.onload = function() {
     document.getElementById("Checklist").getElementsByTagName("table")[0].classList.add("NewClass");
     // OR 
     document.getElementById("Checklist").getElementsByTagName("table")[0].setAttribute("class", "TestClassName");
}

Или вы можете получить таблицу асинхронно, выполнив следующие действия и сделав изменения перед вставкой таблицы:

var xhttp = new XMLHttpRequest;
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // Do Alterations to Table
        document.getElementById("WhereTableWillGo").innerHTML = xhttp.responseText;
    }
}
xhttp.open("GET", "https://website.com");
xhttp.send();

Answer 2

Если вы используете ChildNodes, он вернет все пустое пространство с nodelist, поэтому используйте дочерние элементы, чтобы он возвращал только дочерние элементы

<div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

Измените JS на

document.getElementById("Checklist").children[0].className="TestClassName";
document.getElementById('news').children[0].setAttribute( 'class', new_class );

это будет работать

Answer 3

Попробуйте это

 <div class="data" id="Checklist">
     <p>Some text</p>

     <!-- There is this table -->
     <table style="...">...</table>

     <p></p> 
 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $("#Checklist").children('table').attr("class", "class_name");
</script>

измените имя класса на ваше имя класса

Answer 4

попробуйте добавить класс

document.getElementById("Checklist").classList.add("TestClassName");


document.getElementById('Checklist').childNodes[1].setAttribute('class', 'table1');

.TestClassName {
  color: red;
}

.table1 {
  border: solid 1px;
}

<div class="data" id="Checklist">
  <p>Some text</p>

  <!-- There is this table -->
  <table style="...">...</table>

  <p></p>
</div>