如何在表列中顯示一個按鈕元素

Question

我可能會解釋一下這個問題。

我有一個表，如果我按我的表列名稱，它會展開並顯示輸入和一個按鈕。 問題從顯示頁面開始處每列中的所有按鈕開始，同時按鈕在展開時出現關閉/打開。

我想要做的是，而不是顯示每列中的所有按鈕，我只想在展開（單擊）的列中顯示一個按鈕，並且也顯示在一行中。

$(document).ready(
 
    function() { 
 
    $('th input').slideUp(); 
 
    $('th a').click(
 
     function() { 
 
     var clicks = $(this).data('clicks'); 
 
     if (clicks) { 
 
      $(this).closest(".butt").hide(); 
 
     } else { 
 
      $(this).closest(".butt").show(); 
 
     } 
 
     $(this).data("clicks", !clicks); 
 
     $(this).closest('th').find('input').slideToggle(); 
 
     } 
 
    ); 
 
    } 
 
);

button { 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    background: rgba(1, 1, 1, 0.1); 
 
    height: 30px; 
 
    width: 70px; 
 
} 
 
table { 
 
    display: block; 
 
    width: 400px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    border-spacing: 0; 
 
    max-height: 400px; 
 
    overflow: auto; 
 
} 
 
.naitamine2 table { 
 
    position: fixed; 
 
    width: 700px; 
 
    height: ; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    border-spacing: 0; 
 
    overflow: auto; 
 
} 
 
#table table { 
 
    position: fixed; 
 
    width: 500px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    border-spacing: 0; 
 
} 
 
tr, 
 
th { 
 
    border: 1px solid #CCC; 
 
    background-color: white; 
 
} 
 
th { 
 
    background: #F3F3F3; 
 
    font-weight: bold; 
 
} 
 
tr:nth-child(even) th { 
 
    background: #4DAF7C; 
 
} 
 
tr:nth-child(odd) th { 
 
    background: #FFA400; 
 
} 
 
tr th:hover { 
 
    background: #666; 
 
    color: #FFF; 
 
} 
 
.butt { 
 
    margin-left: 5px; 
 
    margin-top: -10px; 
 
    height: 10px; 
 
} 
 
table.scroll { 
 
    width: 100%; 
 
    /* Optional */ 
 
    /* border-collapse: collapse; */ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 
table.scroll tbody { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
tbody td, 
 
thead th { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="scroll"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Product</th> 
 
     <th>Price</th> 
 
     <th>Avaible</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class='av'> 
 
    <tr> 
 
     <form method='POST'> 
 
     <input type='hidden' name='id' value='$id'></input> 
 
     <th><a>Nimi</a> 
 
      <input name='namem' placeholder='Name'> 
 
      <button type='submit' name='button' class='butt' value='+'></button> 
 
      </input> 
 
     </th> 
 
     <th><a>JUra</a> 
 
      <input name='productm' placeholder='Product'></input> 
 
     </th> 
 
     <th><a>Asi</a> 
 
      <input name='pricem' type='number' step='1.00' placeholder='Price'></input> 
 
     </th> 
 
     <th><a>Ei</a> 
 
      <input name='avaiblem' placeholder='Avaible'></input> 
 
     </th> 
 
     </form> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class='av'> 
 
    <tr> 
 
     <form method='POST'> 
 
     <input type='hidden' name='id' value='$id'></input> 
 
     <th><a>Nimi</a> 
 
      <input name='namem' placeholder='Name'> 
 
      <button type='submit' name='button' class='butt' value='+'></button> 
 
      </input> 
 
     </th> 
 
     <th><a>JUra</a> 
 
      <input name='productm' placeholder='Product'></input> 
 
     </th> 
 
     <th><a>Asi</a> 
 
      <input name='pricem' type='number' step='1.00' placeholder='Price'></input> 
 
     </th> 
 
     <th><a>Ei</a> 
 
      <input name='avaiblem' placeholder='Avaible'></input> 
 
     </th> 
 
     </form> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class='av'> 
 
    <tr> 
 
     <form method='POST'> 
 
     <input type='hidden' name='id' value='$id'></input> 
 
     <th><a>Nimi</a> 
 
      <input name='namem' placeholder='Name'> 
 
      <button type='submit' name='button' class='butt' value='+'></button> 
 
      </input> 
 
     </th> 
 
     <th><a>JUra</a> 
 
      <input name='productm' placeholder='Product'></input> 
 
     </th> 
 
     <th><a>Asi</a> 
 
      <input name='pricem' type='number' step='1.00' placeholder='Price'></input> 
 
     </th> 
 
     <th><a>Ei</a> 
 
      <input name='avaiblem' placeholder='Avaible'></input> 
 
     </th> 
 
     </form> 
 
    </tr> 
 
    </tbody> 
 
    <table>

Answer 1

$(document).ready(function() { 
    $('th input').slideUp(); 
    $('th a').click(function() { 
     $('th input').slideUp(); 
     var clicks = $(this).data('clicks'); 
     if (clicks) { 
      $(this).closest(".butt").hide(); 
     } else { 
      $(this).closest(".butt").show(); 
     } 
     $(this).data("clicks", !clicks); 
     $(this).closest('th').find('input').slideToggle(); 
    }); 
}); 

不知道如果我有你的要求權。但是這隻會顯示您點擊的列的一個按鈕。對？

Answer 2

這並沒有解決我的問題，它仍然顯示每列中的所有按鈕。而且，在點擊功能中上滑是錯誤的，因爲當我再次按列單元時，我不能隱藏我的輸入。

我也將所有的表格標題單元格更改爲標準單元格。