在选定事件中获取与单元格关联的数据

Question

我正在做一个表单生成器应用程序在jquery/javascript开发。我正在使用一个html表，以便单元格是可选择的，我使用jquery"可选择的"api。在初始化单元格时，我已经将一些元数据附加到单元格，现在我想在'selected'事件中访问它。但有些是无法接近的。

$("#form_table").selectable({
                filter: "td",
                selected: function (event, ui) {
                        populatepropgrid(ui.data("element"));
                }
            });

ui。以上代码中的数据总是未定义的。我是jquery新手，很抱歉给你这么简单的问题。

Answer 1

您可以使用以下命令获取选定单元格的data-element属性:

$(ui.selected).data("element")

$("#form_table").selectable({
    filter: "td",
    selected: function (event, ui) {
        console.log("Selected: " + $(ui.selected).data("element"));
    }
});

 td.ui-selecting { background: #FECA40; }
 td.ui-selected { background: #F39814; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>
<table id="form_table">
    <tr>
        <td class="ui-widget-content" data-element="elem1">Element 1</td>
        <td class="ui-widget-content" data-element="elem2">Element 2</td>
        <td class="ui-widget-content" data-element="elem3">Element 3</td>
    </tr>
    <tr>
        <td class="ui-widget-content" data-element="elem4">Element 4</td>
        <td class="ui-widget-content" data-element="elem5">Element 5</td>
        <td class="ui-widget-content" data-element="elem6">Element 6</td>
    </tr>
</table>