Javascript 在多个if条件上追加元素

我有这张桌子：

<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>

里面是下面的代码

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 );

我在网站上有更多的表，但像这样的表不应该附加任何内容

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

使用者
约翰

我的问题/目标：

• 变量thisNext应从下一个td元素获取数据（如果用户 点击名字，它应该得到保罗·约翰逊等），但我的代码没有 工作
• 不是每个th都应该附加工具栏，例如City应该什么都不做-vhat是定义哪些元素应该附加工具栏的最佳解决方案

• 如果是用户“John”th element street，则应附加GMAP和 谷歌内部的工具栏，如果是用户“史蒂夫”相同的元素应该只追加谷歌。对于另一个元素，“史蒂夫”应该得到两个链接，“约翰”什么都没有等

这是

---

我不能使用类、ID等。我只需要使用原始表，就像我发布的一样。

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

如果在服务器端呈现，可以将配置对象传递给各个选项的

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>

使用索引找出

下一个/上一个

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



$（此）
指的是
元素，因此所需的
只是它的下一个同级元素：

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



二,
不是每个th都应该附加工具栏，例如City应该什么都不做-vhat是定义哪些元素应该附加工具栏的最佳解决方案



您可以获取
的内容以确定其“类型”，然后根据其进行决定：

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 );
}



三,
如果是用户“John”th元素street应该在工具栏内附加GMAP和google，如果是用户“Steve”相同元素应该只附加google。对于另一个元素，“史蒂夫”应该得到两个链接，“约翰”什么都没有等



因此，我们为不同的用户提供了不同的按钮集。
每个用户都有单独的页面，还是都在同一页面上

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

*
我还将把所有每个用户和每个类型的规则放在一个配置对象中的某个位置，而不是放在mouseenter处理程序中，但这是下一步。
另一种解决方案，使用基于已知名称的选项hashmap作为键和dom元素索引：

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') {

这当然需要一些微调，但使用索引可能是您最好的方法
您使用的是CLASES，但在我的项目中我不能。为什么不呢？您必须能够以某种方式区分哪个得到工具栏，哪个没有。你要求很多，但没有定义限制标准。这个html是从json生成的服务器端还是客户端？因为我不能。我无法访问html代码，我只创建连接到浏览器扩展的自定义javascript代码。然后你需要通过索引或父表或其他方式隔离这些表。至于哪个
，您需要其他方法来确定哪个获取工具栏，哪个不获取工具栏。也许也可以通过索引。至于Steve vs John，这需要手动绘制，为什么不能使用类和ID呢？对于大量用户来说，使用
if
对用户来说不是非常可伸缩的users@charlietfl我完全同意。我会将所有每用户和每类型规则放在一个配置对象中，而不是放在mouseenter处理程序中，但这是下一步。这并不是我建议对代码进行的唯一优化；）@卡罗琳娜·提查这个答案有用吗？也许你有什么问题？
var thisNext = $(this).next().text();

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 );
}

/**
 * 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 );
    }
}

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') {