In the aspx page I am calling the the user control two times. On page load 1 usercontrol will be visible but the the other will be visible on button click and it should show only book description and book title. To achieve this I named the class of the whole coloumn as hide. Now in when aspx page if I execute:
$('#continue').click(function () {
$(".hide").hide()
});
It removes the coloumn from both the usercontrol called in the aspx as both share the same structure. So can anyone help me how can hide the 3rd coloumn from aspx of the 2nd usercontrol.
I want to get this as output when I click on the button the lower portion is should be visible without the checkbox column
But I am getting this as output here from both the tables the checkbox is removed
What I have tried:
<pre>// THIS IS MY USER CONTROL calling PAGE (ASPX)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Book List.aspx.cs" Inherits="Assignment2._2.Book_List" %>
<%@ Register Src="~/StructureUC.ascx" TagPrefix="uc1" TagName="StructureUC" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 287px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<input type="text" id="src" onkeyup="myFunction()" placeholder="Search for Title" title="Type in a name" class="auto-style1"/><br />
<uc1:StructureUC runat="server" id="StructureUC" />
</div>
<br/>
<input id="continue" type="button" value="continue" onclick="selectItems()" class="auto-style2" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background-color: #00CC00" />
<br />
<br />
<asp:Label ID="Label1" runat="server" BackColor="Silver" Font-Bold="True" Font-Names="Adobe Gothic Std B" Font-Size="Larger" Font-Underline="True"></asp:Label>
<br />
<uc1:StructureUC runat="server" id="StructureUC1" />
<br />
<br />
<br />
<br />
<br />
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#continue').click(function () {
$('#Label1').html('You Have selected the following items: ' );
});
});
$('#continue').click(function () {
$(".hide").hide()
});
</script>
</html>
<pre>// THIS IS MY USER CONTROL PAGE (ASCX)
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StructureUC.ascx.cs" Inherits="Assignment2._2.StructureUC" %>
<script src="../Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<table id="tb1" class="Booklst" >
<tr>
<th style="font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: #FFFFFF; background-color: #006699">Book Title</th>
<th style="font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: #FFFFFF; background-color: #006699">Book Discription</th>
<th style="font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: #FFFFFF; background-color: #006699" id="th3" class="hide">Add to Cart</th>
</tr>
<tr>
<td id="tit1" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">Harry Potter and the Philosopher’s Stone</td>
<td id="dis1" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">Harry Potter is a series of seven fantasy novels written by British author J. K. Rowling.</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC" id="td1" class="hide"> <input type="checkbox" id="c1" name="" value="" runat="server" ></td>
</tr>
<tr>
<td id="tit2" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">Lord of the Rings</td>
<td id="dis2" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">The Lord of the Rings is an epic high-fantasy book by the English author and scholar J. R. R. Tolkien, set in Middle-earth, the world at some distant time in the past. </td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999" id="td2" class="hide"> <input type="checkbox" id="c2" name="" value="" runat="server"></td>
</tr>
<tr>
<td id="tit3" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">To Kill a Mockingbird</td>
<td id="dis3" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">A timeless classic explores human behaviour and the collective conscience of The Deep South in the early 20th century.</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC" id="td3" class="hide"> <input type="checkbox" id="c3" name="" value="" runat="server"></td>
</tr>
<tr>
<td id="tit4" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">The Book Thief</td>
<td id="dis4" style ="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">It follows Liesel as she rescues books from the tyranny of Nazi rule.</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999" id="td4" class="hide"> <input id="c4" type="checkbox" name="" value="" runat="server"></td>
</tr>
<tr>
<td id="tit5" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">The Diary Of A Young Girl</td>
<td id="dis5" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC">Unforgettable and deeply influential, Anne Frank’s diary is a raw account of a young girl’s life as she hides from the Nazis.</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #CCCCCC" id="td5" class="hide"> <input id="c5" type="checkbox" name="" value="" runat="server"></td>
</tr>
<tr>
<td id="tit6" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">The Alchemist</td>
<td id="dis6" style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999">The constant theme in The Alchemist is to pursue your dreams by following what it desires.</td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background-color: #999999" id="td6" class="hide"> <input id="c6" type="checkbox" name="" value="" runat="server"></td>
</tr>
</table>
<script type="text/javascript">
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("src");
filter = input.value.toUpperCase();
table = document.getElementsByClassName("Booklst")[0];
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
$(document).ready(function () {
table = document.getElementsByClassName("Booklst")[1];
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
tr[i].style.display = "none";
}
});
function selectItems() {
allTable = document.getElementsByClassName("Booklst");
originalTable = allTable[0];
resultTable = allTable[1];
trResultTable = resultTable.getElementsByTagName("tr");
checkBoxOriginalTable = originalTable.getElementsByTagName("input");
trResultTable[0].style.display = "";
for (i = 0; i < checkBoxOriginalTable.length; i++) {
if (checkBoxOriginalTable[i].checked) {
trResultTable[i + 1].style.display = "";
}
else { trResultTable[i + 1].style.display = "none"; }
}
}
</script>
Submit an article or tip