Schaltfläche zum Verknüpfen in HTML-Tabelle ändern?

Question

Ich habe Schaltflächen in meiner HTML-Tabelle. Wenn ich auf den Button klicke, möchte ich den Link-Button auf "Un-Extend" ändern und ich klicke auf "Un-Extend", um den vorherigen Button zurückzuschalten. Wie kann ich das machen?

<tbody> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @item.MemberCustomerName 
      </td> 
      <td> 
      @item.PositionCodeDescription 
      </td> 
      <td> 
      @item.MemberMasterCustomer 
      </td> 
      <td> 
      @item.MemberCustomerEmail 
      </td> 
      <td> 
      @if (item.EndDate != null) 
      { 
        @item.EndDate.Value.ToShortDateString() 
      } 
      </td> 
      <td> 
       <button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button> 
      </td> 
     </tr> 

     } 

Answer 1

Mögen Sie diese wollen.

<button id="btnExtend" type="button" class="btn btn-info btn-xs un-extended" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button> 

    jQuery(document).on("click",".un-extended",function(){ 
     if(!$(this).hasClass("extend")){ 
      $(this).addClass("extend"); 
      $(this).text("Un-Extend"); 
     }else{ 
      $(this).removeClass("extend"); 
      $(this).text("Extend"); 
     } 
    }); 

Answer 2

Sie können so etwas tun: DEMO

$('button').click(function(){ 
    if($(this).text() == "Extend") { 
     $(this).text('Un-Extend'); 
    } else { 
     $(this).text('Extend'); 
    } 
}); 

Answer 3

Meinen Sie die zu a Tag button Tag ändern?

Da die Schaltfläche Elemente innerhalb der Schleife Iteration sind, können Sie nicht den gleichen ID(s) Namen verwenden, stattdessen setzen classname btnExtend(Sie nennen es), und registrieren, klicken Sie Handler für seine, wie folgt vor:

$(document).on('click', '.btnExtend', function() { 
 
    $(this).text(($(this).text() == 'Extend' ? 'Un-Extended' : 'Extend')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="btnExtend" type="button" class="btn btn-info btn-xs btnExtend" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button>

Answer 4

Sie könnte dies versuchen. .

$ ("# btnExtend") auf ("Klick", function() {

$(this).text($(this).text() == 'Extend' ? 'Un-Extend': 'Extend'); 

});

Answer 5

Wechsel in den folgenden Code und unter funion von Jquery in Code anwenden:

tbody> 
 
    @foreach (var item in Model) 
 
    { 
 
     <tr> 
 
      <td> 
 
       @item.MemberCustomerName 
 
      </td> 
 
      <td> 
 
      @item.PositionCodeDescription 
 
      </td> 
 
      <td> 
 
      @item.MemberMasterCustomer 
 
      </td> 
 
      <td> 
 
      @item.MemberCustomerEmail 
 
      </td> 
 
      <td> 
 
      @if (item.EndDate != null) 
 
      { 
 
        @item.EndDate.Value.ToShortDateString() 
 
      } 
 
      </td> 
 
      <td> 
 
       <button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"' onclick ="showhide(this);" >Extend</button> 
 
      </td> 
 
     </tr> 
 

 
     }

<script> function showhide(victim) 
 
    { 
 
     var text = $(victim).closest('td').find('input:button').text(); 
 

 
     if (text == "Extend") { 
 
      $(victim).closest('td').find('input:button').text('Un-Extend'); 
 
     } 
 
     else { 
 
      $(victim).closest('td').find('input:button').text('Extend'); 
 
     } 
 

 
    } </script>