1. 首頁
  2. 問答
  3. 更改文本和使用Javascript或JQuery的

更改文本和使用Javascript或JQuery的

2012-04-24 59 views
0

我有一個像下面的模板領域內的電網和按鈕列禁用其他按鈕：更改文本和使用Javascript或JQuery的

<asp:TemplateField> 
<ItemTemplate> 
    <input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" /> 
</ItemTemplate> 
</asp:TemplateField>

我想從「地圖路線更改按鈕的文字「到‘取消映射路徑’，當用戶點擊它，我也想用的Javascript或JQuery的禁用此列的其他行的所有按鈕

編輯： 如果以上是不可能的，那麼只有改變文本被點擊的按鈕。

EDIT2：HTML

<table cellspacing="0" cellpadding="3" rules="all" border="1" id="gvRider" style="border-color: White; 
    border-width: 1px; border-style: Solid; width: 100%; border-collapse: collapse;"> 
    <tr class="gridtitlebg" align="left" style="height: 35px;"> 
     <th align="center" scope="col"> 
      # 
     </th> 
     <th scope="col"> 
      Dist From Start (mi) 
     </th> 
     <th scope="col"> 
      Start 
     </th> 
     <th scope="col"> 
      Dist From End (mi) 
     </th> 
     <th scope="col"> 
      Return 
     </th> 
     <th scope="col"> 
      Commuting Days 
     </th> 
     <th scope="col"> 
      Male/Female 
     </th> 
     <th scope="col"> 
      Smoker/Non-Smoker 
     </th> 
     <th scope="col"> 
      Drive/Non-Drive 
     </th> 
     <th scope="col"> 
      Bike-Buddy 
     </th> 
     <th scope="col"> 
      Email 
     </th> 
     <th scope="col" style="width: 30px;"> 
      Map Route 
     </th> 
    </tr> 
    <tr class="grdtext1" align="left" style="background-color: White; height: 30px;"> 
     <td align="center" style="width: 20px;"> 
      1 
     </td> 
     <td align="center" style="width: 70px;"> 
      0.73 
     </td> 
     <td align="center" style="width: 50px;"> 
      08:20 AM 
     </td> 
     <td align="center" style="width: 70px;"> 
      &nbsp; 
     </td> 
     <td align="center" style="width: 50px;"> 
      07:05 PM 
     </td> 
     <td align="left" style="width: 110px;"> 
      <table cellspacing="9" border="0" style="width: 100%;"> 
       <tr> 
        <td> 
         <img src="../Images/icons/days/mon.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/th.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/wed.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/thu.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/fri.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Smoker" src="../Images/icons/filter/icon_smoker.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Not-Driver" src="../Images/icons/filter/noncar_icon.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 54px;"> 
      <input type="image" name="gvRider$ctl02$imgBtnEmail" id="gvRider_ctl02_imgBtnEmail" 
       title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" /> 
     </td> 
     <td> 
      <input type="button" value="Map Route" onclick="MapRoute('0')" /> 
     </td> 
    </tr> 
    <tr class="grdtext1" align="left" style="background-color: #D2E8F9; height: 30px;"> 
     <td align="center" style="width: 20px;"> 
      2 
     </td> 
     <td align="center" style="width: 70px;"> 
      0.94 
     </td> 
     <td align="center" style="width: 50px;"> 
      05:25 AM 
     </td> 
     <td align="center" style="width: 70px;"> 
      1.05 
     </td> 
     <td align="center" style="width: 50px;"> 
      02:20 PM 
     </td> 
     <td align="left" style="width: 110px;"> 
      <table cellspacing="9" border="0" style="width: 100%;"> 
       <tr> 
        <td> 
         <img src="../Images/icons/days/mon.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/th.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/wed.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/thu.png" style="border-width: 0px;" /> 
        </td> 
        <td> 
         <img src="../Images/icons/days/fri.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Non-smoker" src="../Images/icons/filter/icon_nonsmoker.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Driver" src="../Images/icons/filter/icon_carpool.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 70px;"> 
      <table cellspacing="9" border="0" style="width: 78%;"> 
       <tr> 
        <td> 
         <img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td align="center" style="width: 54px;"> 
      <input type="image" name="gvRider$ctl03$imgBtnEmail" id="gvRider_ctl03_imgBtnEmail" 
       title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" /> 
     </td> 
     <td> 
      <input type="button" value="Map Route" onclick="MapRoute('1')" /> 
     </td> 
    </tr> 

</table>

謝謝！

來源

2012-04-24 Kashif

+1

顯示我們的**渲染HTML ** – gdoron 2012-04-24 19:03:49

+0

http://jsfiddle.net/PBER4/1/極品到一些標記來禁用表單。 – 2012-04-24 19:07:28

+0

@gdoron你需要整頁的html嗎？這是很多HTML或只是呈現該列的​​？ – Kashif 2012-04-24 19:08:24

回答

0

這似乎也爲我工作：

<asp:TemplateField> 
<ItemTemplate> 
    <input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" class="map-button" /> 
</ItemTemplate> 
</asp:TemplateField>

注：添加 「地圖按鈕」 類屬性。

<script type="text/javascript"> 
var mapOpen = false; 

$(function() { 
    $('.map-button').on('click', function() { 
     if(mapOpen) { 
      $('.map-button').removeAttr('disabled'); 
      $(this).val('Map Route');  
      mapOpen = false; 
     } 
     else { 
      $('.map-button').attr('disabled', 'disabled'); 
      $(this).val('Unmap Route').removeAttr('disabled'); 
      mapOpen = true; 
     } 
    }); 
});​ 
</script>

來源

2012-04-24 19:34:05 Joshua

+0

小提琴：http://jsfiddle.net/QE3rX/ – Joshua 2012-04-24 19:35:05

0

您可以使用CSS爲要隱藏的按鈕元素創建一個類，然後讓您的JQuery函數將這些元素切換到隱藏它們的另一個類。

$("#button_id").click(function() { 

      $(".buttons_to_hide_class").toggleClass("hidden"); 
      $(this).text() = "UnMap Route"; // Not sure if this is right. The rest should be. 

      return false; 

     });

CSS：

button.buttons_to_hide_class{ 
//Fill in how you want them to look 
} 

button.buttons_to_hide_class.hidden{ 
display:none; 
visibility:hidden; 
}

來源

2012-04-24 19:18:43 broguyman

+0

編輯它來解決我的一些印刷錯誤。 – broguyman 2012-04-24 19:29:04

0

看看這個jsFiddle。 http://jsfiddle.net/bngHu/

我將其設置爲禁用與點擊按鈕相同的行和列中的所有按鈕（包括按鈕本身）。

HTML ...

<table> 
<tr> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
    <td> 
     <input class="map-button" type="button" value="Map Route"> 
    </td> 
</tr> 
</table>

JQuery的...

$(document).ready(function(){ 
    $('.map-button').click(function(e){ 
     $(this).val('Unmap Route'); 

     $(this).parent().parent().find(".map-button").attr('disabled', 'disabled'); 

     var col = $(this).parent().parent().children().index($(this).parent()); 

     $.each($('tr'), function() { 
      $(this).find('td:nth(' + col + ')').find('.map-button').attr('disabled', 'disabled'); 
     }); 


    }); 
});​

來源

2012-04-24 19:39:31 Trent

+0

感謝您的時間和精力。 – Kashif 2012-04-24 20:03:13

相關問題

 相關問題