如何动态调整单个单元格的数据表css [英] How to adjust datatables css for individual cells dynamically

问题描述

嗨 -



我正在使用jquery数据表。我想要做的是根据另一列调整列css，如果它包含@符号。所以这里是我尝试过的代码似乎无法正常工作。以下是表格的呈现方式。

Hi -

I am using the jquery datatables. What I'm trying to do is adjust a column css based on another column if it contains an @ symbol. So here is the code that i've tried and cant seem to get working. Here is how the table is rendered.

var table = $("#datatable").DataTable({
    searching:false,
    data: data,
    columns: [
        {
           'className': 'details-control',
           'data': null,
           'defaultContent': ''
        },
        {
            'data': 'id',
            'render': function (id) {
                return '<a href=' + 'Default_XXXXX.aspx?XXXX='+ id + '>' + id+'</a>'
            }
        },
        { 'data': 'orderId' },
        { 'data': 'description'},
        { 'data': 'machineType' },
        { 'data': 'manufacturer' },
        {
            'className': 'valid-id',
            'data': null,
            'defaultContent': '',
            'sortable': false,
            'render': function (id) {
                var validId = $(this).closest('tr').find('td:eq(1)').text();


                if (validId.charAt(0) === "@") {

                    $("#datatable tbody").closest('tr').find('td:eq(6)').removeClass('valid-id');
                    //$("#datatable tbody").closest('tr').find('td:eq(6)').addClass('invalid-id');
                }
            }
        }
    ]
});

我的尝试：



我试过找到id文本。然后使用substring或charAt确定第一个字符是否为@符号。然后从那里找到表格单元格删除初始类并添加无效的类。我甚至尝试过正则表达式，但在渲染中没有任何事情发生。

What I have tried:

I've tried first finding the id text. Then using the substring or the charAt to determine if first character was "@" symbol. then from there find the table cell remove the initial class and add the invalid class. I've even tried a regular expression but in the render nothing is happening.

推荐答案

（ < span class =code-string>＃datatable）。DataTable（{
搜索： false ，
data：data ，
列：[
{
' className'：< span class =code-string>' details-control'，
' data'： null ，
' defaultContent'：' '
}，
{
' data'：' id'，
' render'：功能（id）{
返回 ' < a href =' + ' Default_XXXXX.aspx？XXXX =' + id + ' >' + id + ' < / a>'
}
}，
{' data'：' orderId' }，
{' data'：' description'}，
{' data'：' machineType'}，
{' data'：' 制造商}，
{
' className'：' valid-id'，
' data'： null ，
' defaultContent'：' '，
' sortable'： false ，
' render'： function （id）{
var validId =

("#datatable").DataTable({ searching:false, data: data, columns: [ { 'className': 'details-control', 'data': null, 'defaultContent': '' }, { 'data': 'id', 'render': function (id) { return '<a href=' + 'Default_XXXXX.aspx?XXXX='+ id + '>' + id+'</a>' } }, { 'data': 'orderId' }, { 'data': 'description'}, { 'data': 'machineType' }, { 'data': 'manufacturer' }, { 'className': 'valid-id', 'data': null, 'defaultContent': '', 'sortable': false, 'render': function (id) { var validId =

（ this ）。nearest（' tr' ）.find（' td：eq（1）'）。text（）;


if （validId.charAt（ 0 ）== = @）{

(this).closest('tr').find('td:eq(1)').text(); if (validId.charAt(0) === "@") {

（ ＃datatable tbody）。nearest（' tr'）。find（' td：eq（6）' ）。removeClass（' valid-id'）;
//

("#datatable tbody").closest('tr').find('td:eq(6)').removeClass('valid-id'); //

这篇关于如何动态调整单个单元格的数据表css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！