Jquery在TR上添加並刪除TD內容點擊

我試圖添加一個html標記（綠色加號圖標），當我的表的tr被點擊時，我已經能夠通過append來做到這一點，但我不是當我再次單擊相同的tr或者單擊桌子上的另一個tr時，能夠刪除相同的html標記。Jquery在TR上添加並刪除TD內容點擊

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

來源

2016-12-15 Lowtrux

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

來源

2016-12-15 12:45:09

很好，謝謝人士Himanshu它的工作。只是一個問題，有沒有更乾淨的方法來做到這一點？我試圖保持我的代碼儘可能乾淨，任何有關這方面的建議都會非常感激。 – Lowtrux

我已經更新了我的codepen（http://codepen.io/anon/pen/WogpRp），它工作正常，但我剛剛意識到，如果你開始點擊不同的TR'S時，內部表打開在某個點加號圖標不會顯示出來。你知道最新情況嗎？ – Lowtrux

嗨@Himanshu（或任何可以幫助的人），我一直在處理這個問題幾天，但無法找到解決方案，一切工作正常與jquery，但我已經意識到，當TR打開，我點擊關閉TR會打開它，但加號圖標不會再顯示出來，顯然這發生在您多次點擊表格時，如果有人可以提供幫助，這將會非常有幫助。 – Lowtrux

嘗試刪除所有的圖標時，可以點擊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>'); 
      } 
     });    
     });

來源

2016-12-15 12:14:08

Jquery在TR上添加並刪除TD內容點擊

回答

相關問題