Get Color Attribute from the Styles Table

How to get CSS attributes assigned to a html table?

This http://jsfiddle.net/UvYxc/ is working

HTML

<table>
    <tr style="background:red;" id= "2977"  class ="x y z a b c" >
        <td>RED</td>
    </tr>
</table>

document.getElementById("2977").style.backgroundColor="blue"
alert(document.getElementById("2977").style.backgroundColor);

document.getElementById("2977").className += " blue";
document.getElementById("2977").className += " red";

function getStyle(el, cssprop){
    //IE
    if (el.currentStyle)
        return el.currentStyle[cssprop]
    //Firefox
    else if (document.defaultView && document.defaultView.getComputedStyle)
        return document.defaultView.getComputedStyle(el, "")[cssprop]
    else //try and get inline style
        return el.style[cssprop]
}

var el = document.getElementById("2977");
alert(getStyle(el, "backgroundColor"));
alert(getStyle(el, "color"));

A fiddle here

Retrieve the background color of an element in a table

You could use jQuery and use the css() method where you can either use $('#selector').css('background-color') or $('#selector').css('backgroundColor') like so:

<div class="test">hello</div>

CSS:

.test {
    background-color:#fff;
    width:100px;
    height:100px;
}

JS:

$( document ).ready(function() {
  var c = $('.test').css( "backgroundColor" );
    alert(c);
});

JSFiddle here: http://jsfiddle.net/E4eBJ/

More information on .css() here on the jQuery docs site: http://api.jquery.com/css/

Color a table row with style=color:#fff for displaying in an email

you can easily do like this:-

    <table>
    <thead>
        <tr>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 1</font></th>
          <th bgcolor="#5D7B9D"><font color="#fff">Header 2</font></th>
           <th bgcolor="#5D7B9D"><font color="#fff">Header 3</font></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td>blah blah</td>
        </tr>
    </tbody>
</table>

Demo:- http://jsfiddle.net/VWdxj/7/

Using getAttribute to change a cell's background color

Note that background property isn't a DOM attribute, it's a style attribute.

Note: If you refer to the specified td element, use cells[i] instead, because this keyword in this particular case will not refer to the actually iterated element, but to the window object.

var cells = document.getElementsByTagName('td');

for (i = 0; i < cells.length; i++) {

  if (cells[i].style.background == 'blue') {

    cells[i].style.background = "yellow";

  }

}

<table>

  <tr>

    <td>

      Cell 1

    </td>

    <td>

      Cell 2

    </td>

  </tr>

  <tr>

    <td>

      Cell 3

    </td>

    <td style="background:blue">

      Cell 4

    </td>

  </tr>

</table>

Getting style attribute using BeautifulSoup

Just access the attribute using tag["attribute"]:

In [28]: soup = BeautifulSoup('<tr style="pretty"></tr>', 'html.parser')

In [29]: print(soup.find("tr")["style"]) 
pretty

If you only want the tr tags with style attributes an to get them all:

trs = s.find("table", class_="example-table").find_all("tr", style=True)

for tr in trs:
    print(tr["style"])

Or using a css selector:

trs = s.select("table.example-table tr[style]")

for tr in trs:
    print(tr["style"])

Using your actual url:

In [41]: r = requests.get("http://lol.esportswikis.com/wiki/G2_Esports/Match_History")

In [42]: s = BeautifulSoup(r.content, "lxml")

In [43]: trs = s.select("table.wikitable.sortable tr[style]")

In [44]: 

In [44]: for tr in trs:
   ....:         print(tr["style"])
   ....:     
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#C6EFCE
background-color:#FFC7CE
background-color:#FFC7CE
background-color:#C6EFCE

table alternating colored rows. Keep styles on table rows with attribute, skip other tr's. preferably done by CSS

Redo the table logic using your own elements and you can easily achieve this with nth-of-type if you insert a different type of element:

$('[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<section><span >-</span></section>')
    .attr('data-toggle', 0);
  }
});

.myclass [role=row]:nth-of-type(odd) * {
    background-color: #fad;
}
.myclass {
  display:table;
  border-spacing:2px;
}
.myclass > * {
  display:table-row;
}
.myclass > * > * {
  display:table-cell;
}
header {
  font-weight:bold;
}

tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass">
    <header>
      <span>head 1</span>
      <span>head 2</span>
      <span>head 3</span>
      <span>head 4</span>
    </header>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
</div>

How do I change the font color in an html table?

<table>
<tbody>
<tr>
<td>
<select name="test" style="color: red;">
<option value="Basic">Basic : $30.00 USD - yearly</option>
<option value="Sustaining">Sustaining : $60.00 USD - yearly</option>
<option value="Supporting">Supporting : $120.00 USD - yearly</option>
</select>
</td>
</tr>
</tbody>
</table>

How to change table TD text color via Javascript?

In the HTML you're setting the style attribute of the td element to a string with value color:#f00;, so you'd have to do the same in javascript:

tbl.rows[row].cells[col].style = "color:#f00;";

This is because the style attribute is a string which must be valid css, not a javascript object with properties like color.