查找具有样式属性的元素并进行更改

时间:2019-04-24 14:30:21

标签: javascript php html css html-table

首先,我不知道是否将对象称为正确的名称。

但是有可能循环遍历html文件并选择一个带有样式属性bgcolor的标签(我知道这已经过时了)。

每x次,我需要具有style属性bgcolor的元素。具有其他元素以外的其他颜色。 x的时间量是不规则的并且不是恒定的,除了bgcolor标签之外没有其他常数。

我试图弄清楚我可以使用哪些元素,使其表现出一致,以便将其用作起点。找到的唯一一个是bgcolor标记。

这是我从中检索html信息的代码。

<?php
    //get url var
    $page = $_GET['page'];
    if(empty($page)){
        $page = '2';
    }
$page2nav = '';

if($page=="2"){
    $output = file_get_contents('linktodata');
    $output = strip_tags($output,'<body><div><button><style><td><table><td.white><tr><tbody><b><script>');
    $page2nav = ' class="active"';
}
?>
    <div class="contentwrapper">
      <div class="content">
        <?php echo $output; ?>
    </div>
    </div>

由php脚本拉出的css

<style type="text/css">
    td.white{border-style: none;} 
    TD {font-family: Arial; 
        font-size: 11pt;
        max-width: 500px;
        word-wrap: break-word;} 
    body {color: black; background: white;} 
    table { border-collapse: collapse } 
    td { border: 1px solid black 
         max-width: 500px;
         word-wrap: break-word;}
    </style>
<TABLE BORDER=1 id="table"><tbody><tr bgcolor="orange"><td colspan="9">blablablablablablablabla</td></tr><tr><b><td>datum</td><td align="center">M</td><td align="center">V</td><td>blabla</td><td>resource</td><td>blablag</td></tr><tr bgcolor="orange">                                 
<td> <b>22-04-2019</b> </td>                                
<td align="center"> <b>6</b> </td>                                
<td align="center"> <b>4</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b> no caterteam </b> </td>                                
<td> <b>no kok </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25">6</td>                                
<td align="center" width="25"></td>                                
<td>blabla</td>                                
<td>blabla</td>                                
<td>blabla</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25"></td>                             
<td align="center" width="25">4</td>                             
<td>blabla</td>                             
<td>PersoneelsCatering Veggie</td>                             
<td>avondcatering</td>                             
</tr><tr bgcolor="orange">                                 
<td> <b>23-04-2019</b> </td>                                
<td align="center"> <b>14</b> </td>                                
<td align="center"> <b>10</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b>blala</b> </td>                                
<td> <b>blabla </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25"></td>                                
<td align="center" width="25">4</td>                                
<td></td>                                
<td>blalal</td>                                
<td>blalal</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">6</td>                             
<td align="center" width="25"></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">1</td>                             
<td align="center" width="25"></td>                             
<td></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>

唯一重复的是bgcolor:orange。

我的计划是用其他颜色的橙色更改这些行。

1 个答案:

答案 0 :(得分:0)

这是使用bgcolor属性更改元素的一种方法。看看是否适合您。如果不能更好地解释,我会尽力帮助您。

function changeBgColorElements(color) {
    var list = document.querySelectorAll('[bgcolor]');
    list.forEach(e=>e.setAttribute('bgcolor',color));  
}


changeBgColorElements('green');
<TABLE BORDER=1 id="table"><tbody><tr bgcolor="orange"><td colspan="9">blablablablablablablabla</td></tr><tr><b><td>datum</td><td align="center">M</td><td align="center">V</td><td>blabla</td><td>resource</td><td>blablag</td></tr><tr bgcolor="orange">                                 
<td> <b>22-04-2019</b> </td>                                
<td align="center"> <b>6</b> </td>                                
<td align="center"> <b>4</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b> no caterteam </b> </td>                                
<td> <b>no kok </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25">6</td>                                
<td align="center" width="25"></td>                                
<td>blabla</td>                                
<td>blabla</td>                                
<td>blabla</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25"></td>                             
<td align="center" width="25">4</td>                             
<td>blabla</td>                             
<td>PersoneelsCatering Veggie</td>                             
<td>avondcatering</td>                             
</tr><tr bgcolor="orange">                                 
<td> <b>23-04-2019</b> </td>                                
<td align="center"> <b>14</b> </td>                                
<td align="center"> <b>10</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b>blala</b> </td>                                
<td> <b>blabla </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25"></td>                                
<td align="center" width="25">4</td>                                
<td></td>                                
<td>blalal</td>                                
<td>blalal</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">6</td>                             
<td align="center" width="25"></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">1</td>                             
<td align="center" width="25"></td>                             
<td></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>