将属性添加到动态创建的 table

Question

你好，

我正在使用生成报告的外部软件。我得到 table，然后在 div 中打印到网站。在它生成之前我无法访问它 table，所以我无法在呈现网站之前设置任何属性。

所以我需要给这个 table 添加属性作为渲染过程的最后一步，它是 ID 还是 Class.

并不重要

结构如下：

 <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

尝试添加 class

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>

Answer 2

如果你使用 ChildNodes 它将 return 所有带有节点列表的白色 space 所以使用 children 这样它将 return 只有子元素

<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>

将 class_name 更改为您的 class 姓名

Answer 4

假设这是您的代码，

<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");
}

或者您可以通过执行以下操作异步获取 table，并在插入 table、

之前进行更改

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();

将属性添加到动态创建的 table

Add attribute to dynamicaly created table

html

attributes

tablehtml