2

I have the css and html here in jsfiddle. The CSS is a bit complicated (for me).

I'm working with tables that do not have specific IDs. I get them by getting their classname.

The row in the table:

<tr class = "field_34">
  <th class = "kn-label">
    <span>Home</span>
  </th>
  <td class = "kn-value">
    <span>On</span>
  </td>
</tr>

I would like to assign the CSS generated image to the "On" value. Can this be done? How?

Tim 333 gave the solution. Thank you! The proof is here:

http://jsfiddle.net/VpvxR/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nancy
  • 31
  • 2
  • 1
    Try checking out this question: http://stackoverflow.com/questions/1520429/css-3-content-selector If you're using jQuery, you could use "$('td:contains("on")')" – Darren Jul 21 '14 at 22:33
  • The html in your question bears no resemblance to the that in your linked JS Fiddle, is that deliberate for some reason? It seems to make it harder to help, which seems contrary to your aims in asking this question. – David Thomas Jul 21 '14 at 23:44
  • @David Thomas ... the html in jsfiddle is there only to show the CSS generated image. You are right - at this point it has nothing to do with my application. What I do have is the code I posted here (kn-value, etc.). So the "
    " and so on for the button-wrap... is not part of my code. I also can't change the html. I can extend my application by adding js or jquery to customize it. I hope I am explaining the situation correctly. Thanks.
     – Nancy Jul 22 '14 at 07:02
  • @David Thomas.. Tim 333 has the solution. Thanks for your help in anycase. – Nancy Jul 22 '14 at 07:32

1 Answers1

1

I kind of got it working using jquery to replace the On with some divs for your css using the code:

cssimage = '<div class="button-wrap">  <div class="button-out">On</div> <div class="button-switch"></div> </div>'

$('span:contains("On")').html(cssimage);

See http://jsfiddle.net/VpvxR/

Tim 333
  • 942
  • 1
  • 8
  • 9
  • Oh that's super! My div classname is actually kn-details-group-column. So I changed "one" to "kn-details-group-column" in the CSS and it works. I updated jsfiddle to show this. Thanks a bunch. I voted for your answer but I apparently I am not allowed to vote since I am new in this forum. – Nancy Jul 22 '14 at 07:31
  • No worries. Re David Thomas, we're supposed to make these things clear so other people can follow the Q&A if they google it. I may edit your question a bit in a couple of days for that purpose. – Tim 333 Jul 22 '14 at 10:29