Question

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

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

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

Answer 2

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

$( 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>');
          }
        });            
      });

Jquery在TR点击时附加和删除TD内容

2 个答案: