显示/隐藏与按钮点击不同的div [英] Show/Hide different Divs with button click
本文介绍了显示/隐藏与按钮点击不同的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的jQuery，我努力让表行崩溃和扩大。该行正与旁边的按钮不同的行。是否有人可以帮助我来指定哪些行必须的onclick崩溃。这里是我的code。
的jQuery
＆LT;脚本SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（＃btnAdd）。点击（函数（）{
$（'。TD1'）切换（）。
}）;
}）;
＆LT; / SCRIPT＆GT;
HTML第一行
@foreach（以型号1 VAR项）
{
＆所述; TR＆GT;
＆所述; TD＆GT;
@ *＆LT; A HREF =JavaScript的：hideElem（@ item.OrderNumber）的onclick =hideElem（@ item.OrderNumber）＆GT; H单击此处＆lt; / A＆GT; * @
@ *＆LT; A HREF =ID =btnAddNAME =btnAdd＆GT; S单击此处＆lt; / A＆GT; * @
＆LT;按钮ID =btnAddNAME =btnAdd＆gt;添加＆LT; /按钮＆GT;
＆LT; / TD＆GT; ＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.OrderNumber）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.TransactionDate）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Company）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Lines）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.OrderedTotal）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.ProcessedTotal）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Status）
＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
}
HTML第二排
＆LT; TD＆GT;
＆LT;按钮ID =btnAddNAME =btnAdd＆gt;添加＆LT; /按钮＆GT;
＆LT; / TD＆GT;@foreach（模型2中的VAR ITEM2）
{
如果（item2.Order == item.OrderNumber）
{
＆LT; TR类=rowClass TD1ID =TD1的风格=背景色：RGB（217237247）;填充：0像素;＆GT;
＆LT; TD风格=宽度：20px的＆GT;＆LT; / TD＆GT; ＆所述; TD＆GT;
＆LT; DIV＆GT;
@ Html.DisplayFor（modelItem =＆GT; item2.PickNo）
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆所述; TD列跨度=4＆GT;
＆LT; DIV的风格=浮动：左＆GT;
结束：
@ Html.DisplayFor（modelItem =＆GT; item2.PickEndDate）
@ Html.DisplayFor（modelItem =＆GT; item2.PickEndTime）
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; DIV＆GT;
＆LT; IMG SRC =〜/图标/ WAGIconPDF.PNGWIDTH =20高度=20/＆GT; @ Html.DisplayFor（modelItem =＆GT; item2.InvNo）
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; DIV＆GT;
＆LT; IMG SRC =〜/图标/ WAGIconWarehouse1.PNGWIDTH =20高度=20/＆GT; @ Html.DisplayFor（modelItem =＆GT; item2.Warehouse code）
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT; }
}
解决方案
我得到了它
jQuery的code：
＆LT;脚本SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本＆GT;$（函数（）{
$（TD [colspan值= 3]）找到（P），隐藏（）。
$（表）。点击（函数（事件）{ event.stopPropagation（）;
变量$目标= $（event.target）;
$ target.closest（TR）nextUntil（父。）发现（P）的slideToggle（）。;
}）;
}）;
，然后我的HTML code
＆LT;表类=表表镶上无空间的边界=0CELLSPACING =0的cellpadding =0＆GT; ＆所述; TR＆GT;
＆LT;第i个 ＆LT; /第i
＆LT;第i个
订购名称
＆LT; /第i
＆LT;第i个
交易日期
＆LT; /第i
＆LT;第i个
公司
＆LT; /第i
＆LT;第i个
行
＆LT; /第i
＆LT;第i个
共有序
＆LT; /第i
＆LT;第i个
总加工
＆LT; /第i
＆LT;第i个
状态
＆LT; /第i ＆LT;第i个
信息
＆LT; /第i
＆LT; / TR＆GT;
@foreach（以型号1 VAR项）
{ ＆LT; TR类=父＆GT; ＆所述; TD＆GT; ＆LT;跨度＆GT;单击＆lt; / SPAN＆GT; ＆LT; / TD＆GT; ＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.OrderNumber）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.TransactionDate）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Company）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Lines）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.OrderedTotal）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.ProcessedTotal）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Status）
＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
的foreach（在Model2的VAR ITEM2）
{ 如果（item2.Order == item.OrderNumber）
{
＆所述; TR类=NewRows＆GT;
＆LT; TD风格=宽度：20px的＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆所述p为H.; @ Html.DisplayFor（modelItem = GT; item2.PickNo）所述; / P＆GT;
＆LT; / TD＆GT;
＆所述; TD列跨度=4＆GT;
＆LT; p =风格浮动：左＆GT;
结束： @ Html.DisplayFor（modelItem =＆GT; item2.PickEndDate）
@ Html.DisplayFor（modelItem =＆GT; item2.PickEndTime）
＆所述; / P＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆所述p为H.;＆下; IMG SRC =〜/图标/ WAGIconPDF.PNG宽度=20高度=20/＆GT; @ Html.DisplayFor（modelItem = GT; item2.InvNo）所述; / P＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P＆GT;＆LT; IMG SRC =〜/图标/ WAGIconWarehouse1.PNGWIDTH =20高度=20/>@Html.DisplayFor(modelItem =＆GT; item2.Warehouse code）＆LT; /差异无显着
＆LT; / TD＆GT; ＆LT; / TR＆GT;
} }
}＆LT; /表＆gt;
I'm new to jQuery and I'm struggling to let the table row collapse and expand. The rows are under different rows with buttons next to them. Can someone please help me to specify which row must collapse onclick. Here is my code.
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnAdd").click(function () {
$('.td1').toggle();
});
});
</script>
HTML first row
@foreach (var item in Model1)
{
<tr>
<td>
@*<a href="javascript:hideElem(@item.OrderNumber)" onclick="hideElem(@item.OrderNumber)">HClick here</a>*@
@*<a href="" id="btnAdd" name="btnAdd">SClick here</a>*@
<button id="btnAdd" name="btnAdd">ADD</button>
</td>
<td>
@Html.DisplayFor(modelItem => item.OrderNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.TransactionDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Company)
</td>
<td>
@Html.DisplayFor(modelItem => item.Lines)
</td>
<td>
@Html.DisplayFor(modelItem => item.OrderedTotal)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProcessedTotal)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td></td>
</tr>
}
HTML Second Row
<td>
<button id="btnAdd" name="btnAdd">ADD</button>
</td>
@foreach (var item2 in Model2)
{
if (item2.Order == item.OrderNumber)
{
<tr class="rowClass td1" id="td1" style="background-color:rgb(217,237,247); padding:0px;">
<td style="width:20px"></td>
<td>
<div>
@Html.DisplayFor(modelItem => item2.PickNo)
</div>
</td>
<td colspan="4">
<div style="float:left">
Ended:
@Html.DisplayFor(modelItem => item2.PickEndDate)
@Html.DisplayFor(modelItem => item2.PickEndTime)
</div>
</td>
<td></td>
<td>
<div>
<img src="~/Icons/WAGIconPDF.PNG" width="20" height="20" /> @Html.DisplayFor(modelItem => item2.InvNo)
</div>
</td>
<td>
<div>
<img src="~/Icons/WAGIconWarehouse1.PNG" width="20" height="20" /> @Html.DisplayFor(modelItem => item2.WarehouseCode)
</div>
</td>
</tr>
}
}
解决方案
I Got it jQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function () {
$("td[colspan=3]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
$target.closest("tr").nextUntil(".parent").find("p").slideToggle();
});
});
AND THEN MY HTML CODE
<table class="table table-bordered noSpace" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>
</th>
<th>
Order Name
</th>
<th>
Transaction Date
</th>
<th>
Company
</th>
<th>
Lines
</th>
<th>
Ordered Total
</th>
<th>
Processed Total
</th>
<th>
Status
</th>
<th>
Info
</th>
</tr>
@foreach (var item in Model1)
{
<tr class="parent">
<td>
<span>Click</span>
</td>
<td>
@Html.DisplayFor(modelItem => item.OrderNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.TransactionDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.Company)
</td>
<td>
@Html.DisplayFor(modelItem => item.Lines)
</td>
<td>
@Html.DisplayFor(modelItem => item.OrderedTotal)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProcessedTotal)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td></td>
</tr>
foreach (var item2 in Model2)
{
if (item2.Order == item.OrderNumber)
{
<tr class="NewRows">
<td style="width:20px"></td>
<td>
<p>@Html.DisplayFor(modelItem => item2.PickNo)</p>
</td>
<td colspan="4">
<p style="float:left">
Ended:
@Html.DisplayFor(modelItem => item2.PickEndDate)
@Html.DisplayFor(modelItem => item2.PickEndTime)
</p>
</td>
<td></td>
<td>
<p><img src="~/Icons/WAGIconPDF.PNG" width="20" height="20" /> @Html.DisplayFor(modelItem => item2.InvNo)</p>
</td>
<td>
<p><img src="~/Icons/WAGIconWarehouse1.PNG" width="20" height="20" />@Html.DisplayFor(modelItem => item2.WarehouseCode)</p>
</td>
</tr>
}
}
}
</table>
这篇关于显示/隐藏与按钮点击不同的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
