Daniel Rubio February 2016

automatilcy get info for ::before element with JavaScript

so I've been trying to figure out a wait to get this to work with having multiple tables on a single web page.

<table class="table table-striped basic">
    <thead>
        <tr>
            <th>Saturday</th>
            <th class="time">10:30am</th>
            <th class="time">11:00am</th>
            <th class="time">11:30am</th>
            <th class="time">12:00pm</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3/5/2016</td>
            <td>15231</td>
            <td>15232</td>
            <td>15233</td>
            <td>15234</td>
        </tr>
        <tr>
            <td>3/5/2016</td>
            <td>15231</td>
            <td>15232</td>
            <td>15233</td>
            <td>15234</td>
        </tr>

<script>
    var time = $('.time').text();
    $(function() {
        $('table td:nth-child(2)').attr('data-before-content', time);
        $('table td:nth-child(3)').attr('data-before-content', time);
        $('table td:nth-child(4)').attr('data-before-content', time);
        $('table td:nth-child(5)').attr('data-before-content', time);
    });

</script>

CSS:

 .table td:nth-child(2)::before {
    content: attr(data-before-content);
}

trying to figure out a way to get the context of each "th" and place it ::before in the css while having multiple tables. Any suggestions?

Answers


Bwaxxlo February 2016

var time = $('.time'); returns an all the text of all element with the class .time. Instead, you should use something like $('.time:nth-child('+i+')').text() inside a for-loop.

<script>
    var time = $('.time');
    $(function() {
      for(var i = 0, len=time.length; i<len; i++){
        $('table td:nth-child(' +i+ ')').attr('data-before-content', $(time[i]).text());
      }
    });

</script>


Joseph Marikle February 2016

Are you thinking something along the lines of this? You can use a combination of .each(), .eq(), and .not()

$('table tr').each(function(){
  $('td', this).not(':first-child').each(function(i){
    $(this).attr('data-before-content', $('.time').eq(i).text());  
  });
});
.table td:before {
  content: attr(data-before-content) '\00a0';
}

.table td {
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
  <thead>
    <tr>
      <th>Saturday</th>
      <th class="time">10:30am</th>
      <th class="time">11:00am</th>
      <th class="time">11:30am</th>
      <th class="time">12:00pm</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3/5/2016</td>
      <td>15231</td>
      <td>15232</td>
      <td>15233</td>
      <td>15234</td>
    </tr>
    <tr>
      <td>3/5/2016</td>
      <td>15231</td>
      <td>15232</td>
      <td>15233</td>
      <td>15234</td>
    </tr>
  </tbody>
</table>

In case the .time data is table specific (which is more likely the case I would think), I'd recommend using this instead:

    

Post Status

Asked in February 2016
Viewed 2,159 times
Voted 8
Answered 2 times

Search




Leave an answer