Question

我有这张桌子：

<table>
  <tr>
    <th>Name</th>
    <td>Paul Johnson</td>
    <th>Birthdate</th>
    <td>28th May 1974</td>
  </tr>
  <tr>
    <th>Street</th>
    <td>Fake Street 148</td>
    <th>City</th>
    <td>New York</td>
  </tr>
</table>

有一个由mouseenter事件执行的脚本

$('th').on("mouseenter mouseleave", function(e) {if (e.type === 'mouseenter') {

});

里面的代码是

var toolbar = $("<div />").css({
      "padding": "5px",
      "background" : "#F8F8F8" 
      "borderRadius" : "5px 0 5px 5px",
      "left" : "-30px",
      "top" : "0",
      "zIndex" : "99"
    });

toolbar.append( gmaps ).append( google ).append( phone ).append( copy );

$(this).append( toolbar );

并在工具栏中链接

    var link = $("<a />").css({
      "display" : "block",
      "height" : "20px",
      "width" : "20px",
      "marginBottom" : "5px",
      "background-size" : "100%",
      "position" : "relative"})
      .attr({"target" : "_blank"
});

有多种链接，超过100种变体。例如有两个

var thisNext = $( $(this).parent().next('td') ).text();

    var gmaps = link.clone().css({
      "background" : "url(https://dl.dropboxusercontent.com/s/pwcubxu7xoigavz/maps.png) no-repeat",
      "background-size": "100%",
    }).attr({href: 'https://www.google.com/maps/search/' + thisNext });

    var google = link.clone().css({
      "background" : "url(https://dl.dropboxusercontent.com/s/ja0plpnomx3v0jn/find.png) no-repeat",
      "background-size": "100%",
    }).attr({href: 'https://www.google.cz/search?q=' + thisNext });

我在网站上有更多的桌子，但像这样的桌子不应该什么都不添加

<table>
  <th>User</th>
  <td>John</td>
</table>

我的问题/目标：

变量thisNext应该从下一个td元素获取数据（如果是用户点击命名，它应该得到保罗约翰逊等），但我的代码没有原理
不是每个都应该附加工具栏，例如城市应该什么都不做 - 这是定义哪些元素应该附加工具栏的最佳解决方案？
如果用户“John”元素街道应该附加gmaps和谷歌里面的工具栏，如果是用户“史蒂夫”相同的元素应该只附加谷歌。对于另一个元素，“Steve”应该获得两个链接，“John”没有等等。

这里是codepen

我无法使用类，ID等来制作它。我只需要像我发布的那样使用原始表格。

Answer 1

1

变量thisNext应该从下一个td元素获取数据（如果用户点击名称，它应该得到Paul Johnson等），但我的代码不起作用

$(this)指的是<th>元素，所以期望<td>只是它的下一个兄弟：

var thisNext = $(this).next().text();

2

不是每个都应该附加工具栏，例如，城市应该什么都不做 - 这是定义哪些元素应该附加工具栏的最佳解决方案？

您可以获取<th>个内容以确定其＆＃34;类型＆＃34;然后根据它做出决定：

var this_type = $(this).text();
//"User", "Street", "City", etc.

if (this_type === 'City'){
    //append nothing
} else if (this_type === 'Street'){
    toolbar.append( gmaps ).append( google ); //for example
} else {
    // default (for all the rest "types")

    toolbar.append( gmaps ).append( google ).append( phone ).append( copy );
}

3

如果是用户＆＃34; John＆＃34;元素街道应该在工具栏中附加gmaps和谷歌，如果是用户＆＃34;史蒂夫＆＃34;相同的元素应该只附加谷歌。对于另一个元素应该＆＃34;史蒂夫＆＃34;得到两个链接，＆＃34;约翰＆＃34;什么都没有。

因此，我们为不同的用户提供了不同的按钮组。您是否为每个用户设置了单独的页面，或者它们是否都在同一页面上？

首先，让我们获取当前用户（对于一个用户 - 一页案例）：

/**
 * Finds username on the page.
 * If a table on the page has only one <td>, it's considered a table with username
 */
function determineCurrentUser (){
    $('table').each(function(){
        var $td_elements = $(this).find('td');
        if ( $td_elements.length === 1 ){
            return $td_elements.eq(0).text();
        }
    });
    return false;
}

//How to use:
//Somewhere not in a loop (to call it only once)
var user = determineCurrentUser();

其次，根据用户要求添加哪些按钮：

if (user === 'John'){
    if (this_type === 'City'){
        //append nothing
    } else if (this_type === 'Street'){
        toolbar.append( gmaps ).append( google );
    } else {
        // default (for all the rest "types")
        toolbar.append( gmaps ).append( google ).append( phone ).append( copy );
    }
} else if (user === 'Steve'){
    if (this_type === 'City'){
        //append nothing
    } else if (this_type === 'Street'){
        //only `google` for Steve's street
        toolbar.append( google );
    } else {
        // default (for all the rest "types")
        toolbar.append( gmaps ).append( google ).append( phone ).append( copy );
    }
}

* 我还会将所有按用户和每个类型的规则放在某个不在mouseenter处理程序中的配置对象中，但这是下一步。

Answer 2

使用基于已知名称作为键和dom元素索引的选项的hashmap的替代解决方案：

var config = {
  "John" : {"map": "gmap", "links":[1,4,6]},
  "Steve" : {"map": "bing", "links":'all'}
}

假设表是页面中的第一个表，工具栏位于名称也位于行的第二个单元格中

var $table = $('table').eq(0);
$table.find('tr>th:eq(1)').on("mouseenter mouseleave", function(e) {
        var opts = config[$(this).text()];
        if (e.type === 'mouseenter') {

这肯定需要一些微调，但使用索引可能是你最好的方法

Answer 3

对于初学者，使用class来表示应该有工具栏的元素。

如果正在呈现服务器端，您可以将配置对象传递给data-属性以获取各种选项。如果正在呈现客户端，则使用data()方法存储元素

 <tr data-toolbar-options='{"map": "gmap", "links":[1,4,6]}'>
    <th>Name</th>
    <td class="has-toolbar" >Paul Johnson</td>
    <th>Birthdate</th>
    <td>28th May 1974</td>
  </tr>

JS

$('th.has-toolbar').on("mouseenter mouseleave", function(e) {
        var opts = $(this).parent().data('toolbar-options');
        if (e.type === 'mouseenter') {
          // use opts to determine what goes in toolbar

使用索引来确定next/previous

在多个if条件下追加元素

3 个答案:

1

2

3