Jquery 更改handsontable中单元格的类名

我想更改handsontable中“td”的类名。所以我使用jquery来处理“addClass”。在我的css文件中，我用这个类名指定了一种颜色

我的css：

 .error
 {
     background-color : red;
     color : blue;
 } 

我的jquery代码是：

  <script type="text/javascript">
      $(document).ready(function(){
        $('#submit_button_essai').click(function(){
            var td;


            td=(hot.getCell(1,1));

            $(td).addClass("error");


            $.post("ajax_insert_essai.php",{arr:data_essai}, insert_essai_callback);



        });

    });

$（文档）.ready（函数（）{
$（'#提交按钮_essai'）。单击（函数（）{
var-td；
td=（hot.getCell（1,1））；
$（td）.addClass（“错误”）；
$.post（“ajax\u insert\u essai.php”，{arr:data\u essai}，insert\u essai\u回调）；
});
});

我不知道如何才能将类名只分配给一个单元格！

---

有人能帮我吗？

您可以尝试查看Handsontable.Dom.addClass函数。

---

它将元素和类名作为参数。查看handsontable的源代码，它在很多地方都有使用。

有一种非常简单的方法可以做到这一点，因为handsontable是在考虑这个用例的情况下构建的

您希望使用

单元格

属性的

自定义渲染器

选项。它会将渲染器应用于所有匹配的单元格，并在渲染器中执行一些有趣的操作。以下是如何：

首先定义渲染器：

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // get the jquery selector for the td or add the class name using native JS
    $(td).addClass("error");

    return td;
}

如您所见，这会将该类应用于您赋予该渲染器的每个

td

。现在只需要把它给正确的细胞。您可以通过添加

单元格

属性来实现这一点：

var hot = new Handsontable(container, {
    data: data,
    cells: function(row, col, prop) {
        var cellProperties = {};

        if (row === 0, col === 0) {
            cellProperties.renderer = customRender; // uses function directly
        }
    }
});

最终要做的是在任意单元格上定义渲染器。现在，当然，这将只是在渲染时添加它，而不是动态地添加它。为此，您可以使用与此类似的第二种方法

您的

单击事件可以做两件事：

1） 重新计算
单元格
选项并更新它们

这一个很简单，并且遵循上面的示例。您可能需要修改
单元格
，以将渲染器应用于要向其中添加类名的单元格。之后，您只需执行以下操作：

hot.updateSettings({cells: newCellObject});

就这样

第二个更有趣的选项是在每个单元格上定义自定义渲染器。如果执行此操作，则需要在该呈现器函数中添加要添加类名的单元格逻辑；这是可能的，因为渲染器将行和列位置作为输入，因此您可以执行以下操作：

// to do a fast search, use this hack to turn the array into strings
var globalErrorCells = [[1,2]+'', [0,0]+'']; 

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // we check if this cell is in our global array of cells to include
    if (globalErrorCells.indexOf([row, col] + '')) {
        // get the jquery selector for the td or add the class name using native JS
        $(td).addClass("error");
    }

    return td;
}

就这样！每次要添加要添加类名的单元时，将单元坐标推送到该全局数组，下次渲染时，handsontable将自动正确渲染该单元。大概是这样的：

// assume we're inside the click
var cell = [1,2]+''
globalErrorCells.push(cell);
hot.render();

删除类名也是一样，只需搜索要删除的单元格，然后从
globalErrorCells
数组中删除它

我希望这是有道理的！最后一点意见。如果您试图进行验证，我建议您阅读Handsontable页面上有关验证程序的部分。您可以使用
单元格
选项执行类似的操作，以传入验证器函数。这会在渲染时应用于所有单元格，如果验证失败，它会自动向该单元格添加一个类，然后您可以使用CSS更改该类：D
最简单的方法

有一种更简单的方法可以使用Javascript动态地实现这一点。尽管这是一个迟来的答案，其他人肯定会感激它

我想通过jQuery工具提示添加图像缩略图，所以我需要为行添加标题，但您可以按照我的相同逻辑添加任何属性。如果你只想做单元格，那么添加另一个级别并使用“td”。我也在这里增加了一个课程供大家学习

var count = 0;
while(arr_length > count)
{
    var tmp_count = count + 1;//did this because i have a Handsontable header defined and the first index of tr is the header, if you have one
    if(main_drawing_jpg[count] == "/FOLDER_1/image_not_available.jpg")
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='/FOLDER_1/thumb_image_not_available.jpg' />";
    }else
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='" + main_drawing_jpg[count] + "_thumb.jpg' />";
    }
    var tmp_class_name = "row_" + tmp_count + "_class";
    spreadsheet.getElementsByTagName("tr")[tmp_count].setAttribute(class, tmp_class_name);
    count++;
}

给那个特定的单元格一个ID，或者使用
nth-child（）
函数来选择你喜欢的单元格。因为你，我走对了路！谢谢我在搜索n-child（）时找到了.eq（），它似乎工作得很好。哈哈！我不知道该函数
eq（）
，谢谢：）这不起作用的原因是，handsontable渲染非常频繁，因此这只会在一瞬间起作用，然后在下一次渲染时丢失。答案见下文。有没有办法添加多个类？是的，把它们隔开：
$（td）.addClass（“class1 class2 class3”）
对不起，我不够清楚，我的意思是：我回答了那个问题。简短回答：不一定，你必须是声明性的和不可变的，也就是说，单元格每次都是从头开始渲染的。
$(function()
{
    $(document).tooltip(
    {
        //track: true,
        position: { my: "left+10 center", at: "right center" },
        content: function ()
        {
            return $(this).prop('title');
        }
    });
});