Question

你好，

我正在使用外部软件来生成报告。我要放桌子，然后将它打印到div中的网站上。在生成该表之前，我无权访问此表，因此在呈现网站之前，我无法设置任何属性。

因此，在呈现过程的最后一步，我需要向该表中添加属性，这与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

如果使用ChildNodes，它将返回节点列表中的所有空白，因此请使用子代，以便仅返回子代元素

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

尝试添加类

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

假设这是您的代码，

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

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

4 个答案: