Looking to hide the first td of the second row in the table below with a class of "visi". Any suggestions on how to achieve this?
.visi{ display:none;}<table border="1" cellpadding="1">
<tr>
<td class="visi" rowspan="2">__</td>
<td>1</td>
</tr>
<tr>
<td class="visi" rowspan="2">__</td>
<td>2</td>
</tr>
</table>If you're looking for a simple solution, consider utilizing css pseudo elements:
el:first-child: this selects the first child of the el element within its parent. Click here for more information: https://www.w3schools.com/cssref/sel_firstchild.aspel:nth-child(number): choose the n-th occurrence of the el element within its parent. Learn more about it here: https://www.w3schools.com/cssref/sel_nth-child.aspTo apply both concepts, you can do the following:
table tr:nth-child(2) > td:first-child { /* your style*/ }
table tr:nth-child(2) > td:first-child {
display:none;
}<table border="1" cellpadding="1">
<tr>
<td class="visi" rowspan="2">__</td>
<td>1</td>
</tr>
<tr>
<td class="visi" rowspan="2">__</td>
<td>2</td>
</tr>
</table>tr:nth-child(2) will target the second occurrence of tr element.
td:nth-child(1), on the other hand, selects the first instance of td.
.visi{ background:orange}
tr:nth-child(2)>td:nth-child(1) {
display: none;
}<table border="1" cellpadding="1">
<tr>
<td class="visi" rowspan="2">__</td>
<td>1</td>
</tr>
<tr>
<td class="visi" rowspan="2">__</td>
<td>2</td>
</tr>
</table>Use the combination of find and eq methods along with addClass to effectively hide your target element.
$('table').find('tr').eq(1).find('td').eq(0).addClass('hide');.visi {
background: orange
}
.hide
{
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1">
<tr>
<td class="visi" rowspan="2">__</td>
<td>1</td>
</tr>
<tr>
<td class="visi" rowspan="2">__</td>
<td>2</td>
</tr>
</table>simply substitute it with this
<td class="visi" style="display:none;" rowspan="2">__</td>
I'm trying to dynamically update the class name for a specific div at runtime, and this div also includes support for image preview using JQuery. ...
Currently, I am utilizing the jquery.ajax techniques to transmit GET-requests to the server, with caching disabled by setting cache to false. Everything seems to be working fine so far. It appears that jQuery automatically includes a timestamp (likely epo ...
I've been delving into Timeline charts using the angularjs google chart API and have come across an interesting limitation. It seems that only 4 columns are allowed, with the extra column designated for tooltips. However, I have a specific requirement ...
I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...
In my previous research, I came across a question similar to mine: Pure CSS accordion not working within CSS tabs. The solution mentioned works perfectly on monitors of any size, but the difference lies in the use of the a element. In their code, setting t ...
In my ASP.Net MVC 5 project with Razor Engine, I am trying to create a page that displays products using AJAX. Below is the code I have written : HomeController : public ActionResult GoodDetails(int id) { Models.NishtmanDBEntities db = new N ...
I searched for similar questions but couldn't find any that helped me. With the assistance of some kind individuals from Stack Overflow, I was able to implement an interval timer sequence on my website. This trailer automatically displays work example ...
Hey there! I have been trying to add a graph to my HTML page for quite some time now. After doing some research, I discovered that using the jqBarGraph plug-in makes it easier to create the desired graph. Below you will find the code that I have on my webp ...
In my class, I am using a JEditorPane to display text that needs to support HTML. When I try to add text to the pane by setting the content type to HTML and then using setText(), nothing appears on the pane. The issue seems to be with setting the content ...
I am currently using the sortable() function in jQuery to create a grid-like "chessboard" within a div. My goal is to allow users to drag and drop sortable items into predetermined spaces, similar to a chess board. In addition to the basic sortable example ...
I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't f ...
Check out this code snippet: <div class="mainptext"> <h3><strong>Master the following:</strong></h3> <div class="container"> <div class="row"> <div class ...
Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...
Recently, I found myself in a puzzling situation with a div that has the attribute runat="server". <div id="results" runat="server" class="results"></div> Using jQuery, I added HTML content to this div. $('.results').html('Add ...
I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...
I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...
Currently, I am utilizing Jquery to temporarily remove an element from the DOM. This specific element consists of an HTML5 video element. However, upon re-adding this element back into the DOM, the video is unable to play and the element appears as blank o ...
I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file. <div v-for="problem in problems"> <div class="row"& ...
Any suggestions for converting minimized JavaScript to earlier versions? Are there any tools or websites available for this task? Thank you in advance for any hints. ...
I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...