我試圖讓描述行出現在一行的點擊上？-有解無憂

當我單擊將出現描述的行時，我想完成這項作業。這是可行的，但我只希望出現 this.Description 行，而隱藏描述的其他行。我嘗試使用切換，但這也不起作用。

我的代碼是：

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $("#tblInventory").ready(function() {
    $(".desc").hide();
  });

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("#tblInventory").click(function() {
    $('.desc').show();
  });

});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

將點擊處理程式放在tr，而不是表格上，然后用于$(this).find(".desc")獲取要顯示的元素。

您可以使用.toggle()而不是.show()這樣它在第一次點擊時出現，在第二次點擊時消失。

沒有必要使用$("#tblInventory").ready(). 該ready事件僅適用于檔案，因此在任何其他元素上呼叫它都被視為在上呼叫它$(document)。而且由于您已經在該$(document).ready()功能中，因此您無需再次執行此操作。

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $(".desc").hide();
  
  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("tr").click(function() {
    $(this).find('.desc').toggle();
  });

});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

jQuery(document).ready(function() {

  $(".desc").hide();

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $('.showDesc').click(function() {
    $('.desc').hide();
    $(this).find(".desc").show();
  });


});

uj5u.com熱心網友回復：

你在找這個嗎？？？

//LAB 10 - 2 INVENTORY PAGE
//alert("2 - connected");
jQuery(document).ready(function() {

  $("#tblInventory").ready(function() {
    $(".desc").hide();
  });

  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $(".desc").parent('tr').click(function() {
  var descData = $(this).children('td.desc').text()

  //alert(descData)
    $('thead tr, tbody tr').hide();
    $( "#appendHead" ).append('<tr ><th ><a style="color: #fff" href="#!" >Back</a> &nbsp;  &nbsp; Description</th></tr>');
    $( "#appendBody" ).append('<tr ><td >' descData '</td></tr>');
});
$(document).on('click', 'a.back', function(){ 
     $('thead tr, tbody tr').show();
     $('.dyn').remove();
     });
});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead id="appendHead">
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th class="desc"> <a style="color: #fff" href="#!" class="back">Back</a> &nbsp;  &nbsp; Description</th>
    </tr>
  </thead>
  <tbody id="appendBody">
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

在 tr 單擊隱藏所有 desc 類并使用以下命令僅顯示單擊的 desc 類：

$("tr").click(function() {
    $(".desc").hide();
    $(this).find('.desc').show();
});

jQuery(document).ready(function() {
  $(".desc").hide();
  $("tr").hover(function() {
      $(this).css({
        'background': '#FF0000',
        'color': '#FFFFFF'
      });
    },
    function() {
      $(this).css({
        'background': '#FFFFFF',
        'color': '#000000'
      });
    });

  $("tr").click(function() {
    $(".desc").hide();
    $(this).find('.desc').show();
  });
});

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

之間的互斥行為

一組元素

^{就像一組單選按鈕在任何給定時間只允許檢查一個按鈕的方式一樣。}

以下示例行為如下：

單擊最后一個<th>切換顯示/隱藏所有.desc
單擊隱藏全部<tr>中的任何一個，然后快速顯示/隱藏單擊的。<tbody>.desc.desc<tr>
懸停行為被洗掉，然后添加到 CSS 中。

tbody tr:hover td {
  background: tomato;
  color: #fff;
}

詳細資訊在下面的示例中注釋

// When page is loaded all .desc are hidden
$(".desc").hide();

// All <tr> in <tbody> plus .all are bound to the click event
$("tbody tr, .all").on('click', function() {
  // If user clicked .all...
  if ($(this).is('.all')) {
    // toggle .on and .off
    $(this).toggleClass('on off');
    // If .all is .on,... 
    if ($(this).is('.on')) {
      // ...show all .desc
      $('.desc').show();
      // Otherwise hide all .desc
    } else $('.desc').hide();
    // If user clicked <tr> in a <tbody>...
  } else if ($(this).is('tbody tr')) {
    // Reset all .desc...
    $('.desc').hide(); // *??
    // ...toggle .on and .off and show and hide
    $(this).toggleClass('on off');
    $(this).find('.desc').toggle();
  } else return false;
});
/* *?? Remove or comment out the designated line to change the current behavior of the 
show/hide tags. */

table {
  table-layout: fixed;
  border: 1px solid;
}

tbody tr:hover td {
  background: tomato;
  color: #fff;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
  cursor: pointer;
}

.selected {
  background: red;
  color: white;
}

<table id="tblInventory">
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>UPC</th>
      <th>Name</th>
      <th>Quantity</th>
      <th class='all on'>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class='on'>
      <td>987456</td>
      <td>Product Blanks</td>
      <td>345</td>
      <td class="desc">Unfinished template for parts 1000222 to 1000299</td>
    </tr>
    <tr class='on'>
      <td>654123</td>
      <td>Threaded Rods</td>
      <td>211</td>
      <td class="desc">Rods threaded at both ends for Support Brackets</td>
    </tr>
    <tr class='on'>
      <td>321789</td>
      <td>Flange Plates</td>
      <td>87</td>
      <td class="desc">Interface for product blank and threaded rod</td>
    </tr>
    <tr class='on'>
      <td>258963</td>
      <td>Flange Plate Bolts</td>
      <td>556</td>
      <td class="desc">1/2" bolts to secure blanks to flange plates</td>
    </tr>
    <tr class='on'>
      <td>198753</td>
      <td>Support Brackets</td>
      <td>11</td>
      <td class="desc">4' lengths to secure flange plates</td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

jQuery(document).ready(function() {

    $(".desc").hide();
    
    $("tr").hover(function() {
        $(this).css({
          'background': '#FF0000',
          'color': '#FFFFFF'
        });
      },
      function() {
        $(this).css({
          'background': '#FFFFFF',
          'color': '#000000'
        });
      });
  
  $('.showDesc').click(function(){
      $('.desc').hide();
      $(this).find(".desc").show();
  });
  
  
  });

table {
  border: 1px solid;
}

td {
  text-align: center;
  padding: 3px;
}

th {
  background: #313140;
  color: white;
}

tr {
  background: white;
  color: black;
}

.selected {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="tblInventory">
        <caption>Product Inventory</caption>
        <thead>
            <tr><th>UPC</th><th>Name</th><th>Quantity</th><th>Description</th></tr>
        </thead>
        <tbody>
            <tr class="showDesc">
                <td>987456</td><td>Product Blanks</td><td>345</td><td class="desc">Unfinished template for parts 1000222 to 1000299</td>
            </tr>
            <tr class="showDesc">
                <td>654123</td><td>Threaded Rods</td><td>211</td><td class="desc">Rods threaded at both ends for Support Brackets</td>
            </tr>
            <tr class="showDesc">
                <td>321789</td><td>Flange Plates</td><td>87</td><td class="desc">Interface for product blank and threaded rod</td>
            </tr>
            <tr class="showDesc">
                <td>258963</td><td>Flange Plate Bolts</td><td>556</td><td class="desc">1/2" bolts to secure blanks to flange plates</td>
            </tr>
            <tr class="showDesc">
                <td>198753</td><td>Support Brackets</td><td>11</td><td class="desc">4' lengths to secure flange plates</td>
            </tr>
        </tbody>
    </table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457368.html

標籤：html jQuery css

上一篇：當滑塊改變和初始條件時如何獲取當前資料滑塊？

下一篇：jquery如果來自foreach資料庫的多個值