【问题标题】:jquery remove selected table's row's background colorjquery删除选定的表格行背景颜色
【发布时间】:2013-04-16 21:06:25
【问题描述】:

如何在 jquery 的帮助下去除选中行的背景色?

假设用户选择了 id=3 的行,我需要删除背景颜色。

<table class='css_table' style='width: 100%'>
<tr>
    <th style='width: 20%'>Kimden</th>
    <th style='width: 25%'>Konu</th>
    <th style='width: 25%'>Mesaj</th>
    <th style='width: 10%'>Okundu</th>
    <th style='width: 20%'>Tarih</th>
</tr>
<tr id='3' class='selected_row' style='cursor: pointer; background-color: #E0EEEE'>
    <td><span class='row_name'>Prof. Dr.altay tinar</span></td>
    <td><span class='row_subject'>asda da dasd asdasda</span></td>
    <td><span class='row_body'>asda da dasd asdasda</span></td>
    <td><span>0</span></td>
    <td><span class='row_time'>4/15/2013 3:40:40 AM</span></td>
</tr>
<tr id='5' class='selected_row' style='cursor: pointer;'>
    <td><span class='row_name'>Ped.Arifx Yilmazx</span></td>
    <td><span class='row_subject'>undefined asd asdsa </span></td>
    <td><span class='row_body'>qdqw dqw d asda sd </span></td>
    <td><span>1</span></td>
    <td><span class='row_time'>4/15/2013 3:42:36 AM</span></td>
</tr>

【问题讨论】:

    标签: jquery asp.net css


    【解决方案1】:

    使用jQuery's css function去除背景色值:

    var selectedId = 3;
    $("#" + selectedId).css("background-color", "");
    

    【讨论】:

    【解决方案2】:

    试试这个

    #HTML

    <table class="css_table" border="1px">
    <tr class='css-row'>
        <th style='width: 20%'>Kimden</th>
        <th style='width: 25%'>Konu</th>
        <th style='width: 25%'>Mesaj</th>
        <th style='width: 10%'>Okundu</th>
        <th style='width: 20%'>Tarih</th>
    </tr>
    <tr id='3' class='css-row'>
        <td><span>Prof. Dr.altay tinar</span></td>
        <td><span>asda da dasd asdasda</span></td>
        <td><span>asda da dasd asdasda</span></td>
        <td><span>0</span></td>
        <td><span class='row_time'>4/15/2013 3:40:40 AM</span></td>
    </tr>
    <tr id='5' class='css-row' >
        <td><span class='row_name'>Ped.Arifx Yilmazx</span></td>
        <td><span class='row_subject'>undefined asd asdsa </span></td>
        <td><span class='row_body'>qdqw dqw d asda sd </span></td>
        <td><span>1</span></td>
        <td><span class='row_time'>4/15/2013 3:42:36 AM</span></td>
    </tr>
    <table>
    

    #CSS 样式

    .css-table
    {
       width:100%;
    }
    .css-row
    {
        cursor: pointer; 
        background-color: #E0EEEE;
        font-weight:normal;
    }
    .css-selectedrow
    {
        color:blue;
        cursor: pointer;
        font-weight:normal;
        background-color: #fff;
    }
    

    #脚本

    $(document).ready(function(){
        $("tr").click(function(){
          $("table tr").addClass("css-row");
          $(this).removeClass("css-row");
      });
    });
    

    【讨论】:

      【解决方案3】:

      尝试如下,它会帮助你...

      下面的函数删除用户点击的表格行的背景..

      小提琴: http://jsfiddle.net/RYh7U/139/

      jQuery :

      $(".css_table tr").click(function(){
          $(this).css("background", "");
      });
      

      【讨论】:

        【解决方案4】:

        试试这个更具体:

        $(".css_table tr[id='3']").css("background-color", "");
        

        DEMO HERE

        【讨论】:

          【解决方案5】:

          你可以试试这个代码

            $(document).ready(function () {
               $(".selected_row").css("background-color", "");
             });
          

          【讨论】:

            猜你喜欢
            • 2019-11-23
            • 2015-01-29
            • 2012-02-06
            • 1970-01-01
            • 2016-11-29
            • 1970-01-01
            • 1970-01-01
            • 2012-01-13
            • 1970-01-01
            相关资源
            最近更新 更多