Jquery Append and Remove TD content on TR click

【问题标题】：Jquery Append and Remove TD content on TR clickJquery Append and Remove TD content on TR click
【发布时间】：2016-12-27 20:04:22
【问题描述】：

我正在尝试在单击我的表格的 tr 时添加一个 html 标记（绿色加号图标），我已经能够通过追加来做到这一点，但是当我删除相同的 html 标记时我无法删除再次单击同一个 tr 或单击桌子上的另一个 tr。

Pencode Here

JQUERY

      $( document ).ready(function() {
    $( ".results tr" ).click(function(e) {
      $(".results tr").not($(this)).removeClass('current');
      $(".results tr").not($(this)).removeClass('opened');
      $(this).toggleClass('current');
      $(this).find('.add-equipment').toggleClass('opened');
      if ($(this).find('.opened')){
        $(this).find('.opened').append('<i class="fa fa-plus-square"></i>');
      }
    });            
  });

HTML：

              <table class="results table table-outside-border">
            <thead>
              <th><input type="checkbox">UBICACION</th>
              <th>EQUIPO</th>
              </th>
            </thead> 
            <tbody>                 
              <tr>              
                <td width="40%"><input type="checkbox"><a href="#" class="location">Edificio 4</a></td>
                <td width="60%" class="add-equipment"></td>
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>                  
              <tr>                 
                <td width="40%"><input type="checkbox"><a href="#" class="location">Azotea</a></td>
                <td width="60%" class="add-equipment"></td>
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>                  
              <tr>
                <td width="40%" class="location"><input type="checkbox"><a href="#">Mástil 1</a></td>
                <td width="60%" class="add-equipment"></td>                    
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>
              <tr>
                <td width="40%"><input type="checkbox"><a href="#" class="location">Tripode Autosoportado ORG1</a></td>
                <td width="60%" class="add-equipment"></td>
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>                  
              <tr>                 
                <td width="40%"><input type="checkbox"><a href="#" class="location">Mástil 3</a></td>
                <td width="60%" class="add-equipment"></td>
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>                  
              <tr>                 
                <td width="40%"><input type="checkbox"><a href="#" class="location">Mástil 2</a></td>
                <td width="60%" class="add-equipment"></td>
              </tr>
              <tr class="inner-content">
                <td colspan="2">
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td width="35%"></td>
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td width="35%"></td>                          
                        <td width="60%">
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td width="5%" class="icon"><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>  
                </td>                    
              </tr>                                                                                 
            </tbody>
          </table>

SASS：

.inner-content {
display:none;
td:first-child {
    border-top:none !important;
}   
}
.results {
    table-layout:fixed;
    border-collapse: collapse;
    td, th {
        border-right:1px solid #c7c7c7;
        &:last-child {
            border-right:none;
        }
    }
}

table {
    border-collapse: collapse!important;
    font-size:14px;
    width: 100%;
    thead {
        border-bottom:2px solid #ddd;
        tr {
            th {
                &:nth-child(1) {
                    width:35.125%;
                }
                &:nth-child(2) {
                    width:65%;
                }               
                padding-left:8px;
                text-align:left;
                input[type=checkbox] {
                    vertical-align: middle;
                    margin-right:10px;
                    margin-top:0;
                }                               
            }
        }   
    }
    tbody {
        td {
            &.add-equipment {
                color:#2b8e00;
                font-size:18px;
                text-align:right;
            }   
            border-bottom:1px solid #c7c7c7;
            padding-left:8px;
            a {
                vertical-align: middle;
                &:hover, &:active, &:visited {
                    text-decoration: none;
                }
            }
            input[type=checkbox] {
                vertical-align: middle;
                margin-right:10px;
                margin-top:0;
            }       
        }
    }
    .current {
        background-color: #eee !important;
        .location {
            font-weight: 700;
        }
        + tr {
            display:table-row;
            td {
                padding:0;
                &:last-child {
                    padding-right:0;
                    padding-bottom:0;
                }
                .table-equipment {
                    background-color:#eee;
                    border-collapse:collapse;
                    table-layout:fixed;                 
                    p {
                        line-height: 10px;
                        &:last-child {
                            margin-bottom:0;
                        }
                    }
                    td {
                        border-right:1px solid #c7c7c7;
                        padding:20px 0 20px 10px;
                        vertical-align: middle;
                        &:last-child {
                            border-right:none;
                        }                       
                        &.icon {
                            padding:0 10px 0 10px !important;
                            text-align:center;
                        }

                    }
                    tr {
                        &:last-child {
                            td {
                                border-bottom:none;
                            }
                        }
                    }
                    .client {
                        color: #40576a;
                        font-weight: 600;
                    }
                    .equipment {
                        color: #7f8080;
                        font-size: 14px;        
                        line-height: 15px;
                        @media only screen and (min-width:768px) {
                            line-height: 15px;
                        }
                    }
                    .fa-exclamation-triangle {
                        color:red;
                        font-size:18px;
                    }
                }
            }
        }       
    }
}
.table-outside-border {
    border:1px solid #e1e1e1;
}
.table-results-audits {
    .box {
        padding:20px 10px;
    }
    label {
        font-weight: normal;
    }
    select {
        display:inline-block;
        width:70px;
    }
    input {
        margin-left: 0.5em;
        display: inline-block;
        width: auto;
    }
    ul {
        margin:0;
    }
    .dataTables_filter, .dataTables_paginate {
        text-align:right;
        white-space: nowrap;
    }
    .input-sm {
        height: 30px;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        padding-top:0;
        padding-bottom:0;
    }
    .table-controls {
        overflow: hidden;
        margin-bottom:10px;
    }   
}

【问题讨论】：

    标签： jquery append html-table


    【解决方案1】： 
    You just need to remove the i icon from your table. You can try the following code:

 $( document ).ready(function() {
    $( ".results tr" ).click(function(e) {
      $(".results tr").not($(this)).removeClass('current');
      $(".results tr").not($(this)).removeClass('opened');
      $(".results tr").not($(this)).find('.add-equipment').removeClass('opened');
      $(this).toggleClass('current');
      $(this).find('.add-equipment').toggleClass('opened');
      $('.results i.fa-plus-square').remove(); //add this line
      if ($(this).find('.opened')){
        $(this).find('.opened').append('<i class="fa fa-plus-square"></i>');
      }
    });            
  });

    【讨论】：

    • 太好了，感谢 Himanshu 成功了。只是一个问题，有没有更干净的方法来做到这一点？我正在努力保持我的代码尽可能干净，对此的任何建议将不胜感激。
    • 我已经用你的行 (codepen.io/anon/pen/WogpRp) 更新了我的 codepen，它工作正常，但我刚刚意识到，如果你在某个时候打开内表时开始点击不同的 TR'S，加号图标会赢不出现。你知道发生了什么吗？
    • 嗨@Himanshu（或任何可以提供帮助的人），我已经处理这个问题好几天了，但还没有找到解决方案，jquery 一切正常，但我意识到当TR 已打开，我单击关闭 TR 它将打开它，但加号图标不会再次显示，显然当您多次单击表格时会发生这种情况，如果有人可以提供帮助，那将非常有帮助。跨度>
    • 嗨@Lowtrux 我已经更新了你现在可以查看的答案
    【解决方案2】：

    尝试在点击 tr 时删除所有图标

    $( document ).ready(function() {
        $( ".results tr" ).click(function(e) {
          $('.plusIcon').remove(); //i added plusIcon class to your icon
          $(".results tr").not($(this)).removeClass('current');
          $(".results tr").not($(this)).removeClass('opened');
          $(this).toggleClass('current');
          $(this).find('.add-equipment').toggleClass('opened');
          if ($(this).find('.opened')){
            $(this).find('.opened').append('<i class="fa fa-plus-square plusIcon"></i>');
          }
        });            
      });

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2013-10-06
      • 1970-01-01
      • 1970-01-01
      • 2010-12-02
      • 1970-01-01
      • 2014-02-20
      • 1970-01-01
      • 2022-12-02
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode