Добавление имени класса в td (столбец) таблицы данных - PullRequest
Новая
       13

Добавление имени класса в td (столбец) таблицы данных

0 голосов
/ 09 мая 2019

Я хочу добавить класс к моим <td> тегам в моей таблице. Вот мой код 

var dtVouchers = $('#tblVouchers').DataTable();
 dtVouchers.row.add([
                     '<span>'+text+'</span>',
                       '<span>'+data._voucherCode+'</span>',
                         ....                         
                     ]).draw( true );

и вот мой результат 

<tr role="row" class="even">
    <td class="sorting_1"><span>Valid</span></td>
    <td><span>be6875f9-5af7-4</span></td>
</tr>

но я бы хотел что-то иметь 

<tr role="row" class="even">
    <td class="vocuherrow sorting_1"><span>Valid</span></td>    
    <td class="vocuherrow"> <span>dd4ce858</span></td>
</tr>

Я пробовал addClass, но он добавляет класс к моей <tr> (строка), а не <td> (столбец)

Итак, мой вопрос заключается в том, как добавить « vocuherrow » в качестве имени класса для каждого моего столбца?

Редактировать: Я предпочитаю добавить класс, когда я добавляю строки .. не по отдельности.

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Вы можете использовать опцию columnDefs.className, например: 

var dtVouchers = $('#tblVouchers').DataTable({
   columnDefs : [{
      targets: '_all',
      className: 'vocuherrow'
   }]
});

После демо иллюстрирует концепцию: 

//src data
const srcData = [
  {voucher: 'dd4ce858', status: 'valid'},
  {voucher: 'dabce769', status: 'valid'},
  {voucher: '4bdacef5', status: 'valid'},
];

//datatables initialization
dtVouchers = $('#tblVouchers').DataTable({
		dom: 't',
    data: srcData,
    columns: ['voucher', 'status'].map(header => ({title: header, data: header})),
		columnDefs: [{
				targets: '_all',
				className: 'vocuherrow'
			}
		]
});
tbody .vocuherrow {
  color: green;
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tblVouchers"></table>
</body>
</html>
1 голос
/ 09 мая 2019 
$('#tblVouchers').find('td').addClass('vocuherrow');

или вы можете оставить класс 'vocuherrow' на tr и использовать 

tr.vocuherrow  td

или аналогичный в вашем css-выборе, который я обычно предпочел бы

...