How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page

I have written some CSS that functions well when searching by Name, but not by Specialty:

.displayresult {
    display: block;
}
#fname, #lname, #splabel, #addlabel, #pnlabel {
    border-width: 4px;
    border-bottom-style: double;
}
#first, #last, #specialty, #address, #phone {
    border-width: 4px;
    border-bottom-style: double;
}

When a user selects specialty and an option, the CSS only adds a double border on the last TD.

How can I adjust the CSS or jQuery Script to achieve one of the following options:

  • Add border after each TD?

OR

  • Alternate between white and grey TDs?

I attempted using jQuery as shown below, but it did not work and behaved the same as the CSS:

$("#fname").css('border-bottom-style', 'double');

You can check out the demo at the link provided above.

Answer №1

To create alternating white and gray backgrounds for each TD element, use the following CSS:

td:nth-child(odd) {
    background-color: gray;
}
td:nth-child(even) {
    background-color: white;
}

Try out the DEMO here!

Answer №2

It is important to remember that IDs should be unique and only assigned to a single element in the DOM.

If your code is not functioning correctly, it might be because you are treating the ID #fname as if it were a class.

Instead of using <td id="#fname">, try using <td class="fname"> for better results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vertical scroll bar positioned on the left side of a DIV

Can a vertical scroll bar be placed on the left side of a DIV using CSS? What about JavaScript? ...

CSS: Position an element based on the size of the screen

I'm currently developing a program that will dynamically resize elements based on the viewer's screen size. The program is being built using JSP/SQL/XHTML/CSS, and I have a couple of queries. Is there a way to select a CSS file by storing the sc ...

Utilizing a modal for Wordpress search queries

I recently started learning PHP and JavaScript, and I've encountered a problem that has me stumped. On my website www.test.com/page, I have a search form that sends user input to www.test.com/results like this: <form method="post" action="https:/ ...

Using JSON in an AJAX request to log in

Currently, I am in the process of developing a straightforward login form that utilizes AJAX for server communication and PHP as the server-side script. However, I have encountered some challenges while trying to send login data to the server via JSON. Th ...

Changing the position from fixed to static

It's strange, but for some reason when I attempt to apply position:fixed using jQuery: $('#footer').css('cssText', 'position:fixed !important;'); to my footer, the result on the page is different: <div id="footer" ...

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

Spontaneous Link with JQuery and Colorbox

Just to clarify, I have no programming experience so please explain everything in simple terms. I am currently using a .js script within SharePoint and it's working perfectly! <!DOCTYPE html> <html> <head> <meta charset= ...

Clicking on the href=#div will cause the page to smoothly scroll down

Whenever I click on the links in my navigation bar, the page automatically scrolls down. How can I resolve this issue? I have a navigation bar containing a list of links. Below is the HTML code: <ul> <li><a href="page.html#1">menu item ...

Identifying SyntaxError during JSONP data retrieval

I'm currently working on a project that involves identifying a SyntaxError when accessing JSONP resources with jQuery, even if they are potentially malformed. For example: try { $.ajax("http://www.google.com", {dataType:"jsonp"}); alert("good"); ...

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

Which is more efficient in jQuery for selecting the nth sibling of a node: chaining .next() n times or using .nextAll(':eq(n-1)')?

If I am looking to select the nth sibling of a node, with an arbitrary number of siblings present, should I use multiple calls of .next() or just one call of .nextAll(':eq(n-1)')? It seems like using multiple .next() calls could result in extra ...

"The JavaScript code that functions perfectly in the browser console, but fails to execute when running in the actual

I'm encountering an issue with a simple piece of JavaScript code that seems to only work when executed in the browser console: <script> $(".hopscotch-close").click(function () { alert("Hi"); Cookies.set("tourState", "closed" ...

Is there a way to retrieve the HTML content from a jQuery object?

I have a series of buttons and corresponding dialog box messages that I would like to display when each button is clicked. Here is the HTML code: <a class="btn dialogbtn dialogbtn-save" href="#">Save</a> <a class="btn dialogbtn dialogbtn-d ...

What is causing the asset pipeline to not recognize my JQuery file?

Trying to implement a JQuery plugin in a Rails 3.2.8 application. Below is the relevant code snippet... Code in /app/views/layouts/application.html.haml file: !!! %html %head = javascript_include_tag :defaults = javascript_include_tag '/a ...

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

I have successfully tested the slideshow and it is functioning perfectly without any issues. I would like to have a dual slideshow setup (slideshow 1 and slideshow 2) with next and previous buttons, but I am interested in adding an automatic sliding featur ...

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...

Issue with function incorrectly computing values and returning NaN

My challenge is to develop a countdown timer, but it keeps returning NaN instead of counting down. I have multiple counters in place - one that counts down, another that counts up until the stop time specified by stoptime, and a third that kicks in after s ...

Creating dynamic divs on button click for my project is something that I must do, and I will

When the user clicks on the Add button, a new div should be added as shown in the image above. Implementing this functionality using Bootstrap is crucial because the divs must rearrange correctly based on different resolutions such as 1920x900, 1280x600, ...