Zebra striscia a una sola colonna da tavolo

Question

Ho una tabella che utilizza tabelle TORCE e Striping Zebra per le righe della tabella.Vorrei aggiungere zebra strisciante a una delle colonne del tavolo per dargli una piccola enfasi.In questo modo:

Answer 1

Se conosci l'indice della colonna di quello che desideri strisciare, puoi farlo solo in CSS, usando: selettori di tipo NTH-of-Type come:

tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }

(dove 3 viene utilizzato un segnaposto per il tuo indice della colonna di destinazione)

Un'altra opzione sarebbe quella di mettere una classe sull'intestazione (o prima td) della colonna che si desidera strisciare, quindi utilizzare JS per strisciare gli altri TDS nella stessa colonna:

var col_to_stripe = $('th.stripe-this-one').index();

$('table.selectively-stripe').find('tr:odd')
  .each(function() {
    $(this).children('td')
      .eq(col_to_stripe)
      .css('background', 'pink');
  });

.

La classe non è necessaria come ovviamente puoi semplicemente mettere l'indice della colonna che desideri come con il puro approccio CSS, ma è meglio per la chiarezza del codice.

demo qui: http://jsbin.com/axutal/2/edit

.

Answer 2

Controlla questo link

Questo può essere fatto usando jQuery senza dare nomi di classe o ID.

 $('tr:odd  td:nth-child(4)').css('background','#999999'); /* For odd td's */
 $('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */  

.

Per ulteriori informazioni su questo JQuery Selector Vai tramite questo link

Answer 3

Avrai bisogno di un nome di classe aggiuntivo e corrispondente dichiarazione CSS corrispondente per il TDS in quella colonna.