テーブルの列に1つのボタン要素を表示する方法

Question

問題を説明するのに少し混乱するかもしれません。

テーブルがあります。テーブルの列名を押すと、入力とボタンが表示されます。 問題は、ページの冒頭にある各列のすべてのボタンを表示することから始まり、拡大中は閉じる/開くボタンも表示されます。

は、各列のすべてのボタンを表示するのではなく、拡大（クリック）された列に1つのボタンを表示したいだけです。

$(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(); 
    }); 
}); 

ない私はあなたの条件の権利を得た場合を確認してください。しかし、これはあなたがクリックした列のボタンを1つだけ表示します。右？

Answer 2

これは私の問題を解決しなかった、それでも各列のすべてのボタンを表示します。また、列のセルを再度押すと入力を隠すことができないので、クリック機能でスライドすると間違っています。

また、すべてのテーブルヘッダーセルを標準セルに変更しました。