vanloc vanloc - 1 month ago 5
Javascript Question

Can't change colour of text with CSS in a table

I want to add colour style into tags.

This only working when using property:

`background-color`: orange;


But I want it should be changed only text, not the background.

Like this:

`color`: orange;


In this demo, don't need Javascript still working.

My demo at here:



function firefoxFix() {

if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

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

for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};

var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );

};

};

firefoxFix();

table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}

td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}

td:hover::after,
.ff-fix:hover::after {
background-color: orange;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}

<table>
<tbody>

<tr>
<td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>

<tr>
<td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>

<tr>
<td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>

<tr>
<td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</tbody>
</table>





Thanks.

Answer

You can add a className to all td elements at event.target .cellIndex at mouseover event, remove the className from all td elements at mouseleave event

var elems = document.querySelectorAll("td");

var elemParents = document.querySelectorAll("tr")

for (var td of elems) {
  td.addEventListener("mouseover", function(e) {
    var index = e.target.cellIndex;
    for (let tr of elemParents) {
      tr.querySelectorAll("td")[index]
      .className = "color";
    }
  });
  td.addEventListener("mouseleave", function(e) {
    for (let tr of elemParents) {
      for (var cell of tr.querySelectorAll("td")) {
        cell.className = "";
      }
    }
  })
}

function firefoxFix() {

  if (/firefox/.test(window.navigator.userAgent.toLowerCase())) {

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

    for (var index = 0; index < tds.length; index++) {
      tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
    };

    var style = '<style>' + 'td { padding: 0 !important; }' + 'td:hover::before, td:hover::after { background-color: transparent !important; }' + '</style>';
    document.head.insertAdjacentHTML('beforeEnd', style);

  };

};

firefoxFix();
.color {
  color: orange;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
}
td,
th,
.ff-fix {
  cursor: pointer;
  padding: 10px;
  position: relative;
}
td:hover::after,
.ff-fix:hover::after {
  background-color: blue;
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}
<table>
  <tbody>

    <tr>
      <td>20</td>
      <td>21</td>
      <td>23</td>
      <td>25</td>
      <td>27</td>
    </tr>

    <tr>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
      <td>26</td>
    </tr>

    <tr>
      <td>17</td>
      <td>19</td>
      <td>21</td>
      <td>23</td>
      <td>25</td>
    </tr>

    <tr>
      <td>16</td>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

Comments