Question

我有一个xhtml页面，我主要使用Knockout.JS管理，但对于简单的DOM操作，我使用的是jQuery。

这是我的表格：

 <table style="font-size: small; margin-left: -1em;
                           border-right: transparent; border-bottom: transparent;" 
                           id="appointmentsTable" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th style="display: none;">id</th>
                                <th class="hand-on-hover" data-bind="click: sortByDate">
                                    #{bigcopy.tableDate} <i id="appDateCri"></i>
                                </th>
                                <th>#{bigcopy.tableTime}</th>
                                <th class="hand-on-hover" data-bind="click: sortByName">
                                    #{bigcopy.tableClient} <i id="appNameCri"></i>
                                </th>
                                <th class="hand-on-hover" data-bind="click: sortByType">
                                    #{bigcopy.tableType} <i id="appTypeCri"></i>
                                </th>
                                <th>#{bigcopy.tableMessage}</th>
                                <th>#{bigcopy.tableEmail}</th>
                            </tr>
                        </thead>
                        <tbody id="fbody" data-bind="foreach: appointments">
                            <tr>
                                <td style="display: none;" data-bind="text:id"></td>
                                <td data-bind="text:date"></td>
                                <td data-bind="text:time"></td>
                                <td data-bind="text:clientName"></td>
                                <td data-bind="text:type"></td>
                                <td style="max-width: 15em;" data-bind="text:message"></td>
                                <td data-bind="text:email"></td>
                                <td style="border: transparent; display: none;">
                                    <span style="color:#d9534f;" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                    <span style="color: #f0ad4e; margin-left: 0.75em;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

正如你在tbody中看到的最后一个td＆gt; tr被隐藏了。它将保存用于编辑/删除表格约会的按钮。我的意图是只在行停留时显示它：

$("#appointmentsTable > tbody > tr").hover(                
            function () {
                //mouseover
                console.log("hovered");
                $(this).find("td:last").css("display", "block");
            }, function () {
        //mouseout
        $(this).find("td:last").css("display", "none");
    });

我在那里输入了console.log（）语句，至少看看jQuery是否识别了选择器。不幸的是，事实并非如此。但是将选择器更改为：

 $("#appointmentsTable tr").hover

和处理程序：

$(this).css("background-color", "red");

...努力将标题的背景描绘成红色。要剥离可能的问题，我就是如何获得选择器：

..然后我右键点击并选择：复制 - ＆gt;的选择

任何提示都会受到赞赏。它可能与页面的.xhtml扩展有关，但对我来说别无选择 - 我不能使用啊：dataTable，因为该表是从REST资源填充和更新的。

Answer 1

似乎是jQuery-KO-xhtml兼容性的一些错误。我已经尝试了很多东西，包括xPath，为每个tr设置自定义ID（具有某种模式）。没有任何效果。我只是无法射击'tbody'。在最后，我使用Knockout.JS实现了一个简单的决定：

我将此添加到约会课程中：

builder
    .RegisterType<Db1Repository>()
    .WithParameter(ResolvedParameter.ForNamed<IDbConnection>("Db1"));

以及这些与'tr'和'td'元素的绑定：

var ents = from ent in dal.ents
           select ent;

string s1 = ents.first().Value1;   // I got 1 here
Console.ReadLine();    // When the system is waiting for my input. I change the same record manually in DB, I change Value2 of ent from 2 to 3 here. 
string s2 = ents.first().Value2    // I got 2 here.

我希望它对任何人都有帮助。

jQuery：tbody＆gt; tr选择器不适用于.hover（）方法

1 个答案: