如何在表列中显示一个按钮元素
如何在表列中显示一个按钮元素
提问于 2017-01-26 19:38:59
我可能在解释这个问题时搞砸了。
我有一个表，如果我按下我的表列名，它将展开并显示输入和一个按钮。问题从显示页面开头的每一列中的所有按钮开始，在展开时也会出现关闭/打开按钮。
我想做的不是显示每列中的所有按钮，而是只在列中显示一个被展开(单击)的按钮，也显示在一行中。
$(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>
回答 2
Stack Overflow用户
发布于 2017-01-26 22:36:13
$(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();
});
});我不确定你的要求是否正确。但这将只显示您单击的列的一个按钮。对吗？
Stack Overflow用户
发布于 2017-01-27 20:30:52
这没有解决我的问题，它仍然显示每个列中的所有按钮。而且，在单击函数中向上滑动也是错误的，因为当我再次按下列单元格时，我无法隐藏输入。
我还将所有表头单元格更改为标准单元格。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41881582
复制相关文章
相似问题
腾讯云开发者
