Expanding the width of a table cell (TD) following a TD with certain text?

I'm dealing with the following HTML structure :- https://i.sstatic.net/5HXsB.png

Now I need to use a CSS selector to increase the width of a <td> element from 850 to 900. However, I want to specify that the <td> which needs to expand should meet the following criteria:

  • It must be inside a table with class = "ms-formtable"
  • It must be inside a <tr> tag
  • It must come after a <td> element containing the word "Description" within a <nobr> tag.

Could anyone provide guidance on how to achieve this?

Answer №1

If you put the content of your td into a data attribute like this:

<td data-td-content="Description">Description</td>

You can then use

td[data-td-contents="description"] + td 

as a CSS selector. However, this method is very precise to the point that even changing a capital letter will render the rule invalid. It's not really recommended as it also increases the amount of data being processed and passed, ultimately doubling the size of your page. Not an ideal solution.

Another option is to utilize jQuery with the :contains() selector. You can try the following:

$("td:contains('Description') + td")

This will target the elements that come after the td containing the specified text value, which you can then manipulate. Here's a snippet example demonstrating its functionality:

$("td:contains('description') + td").addClass('selected')
.selected {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
  <tr>
    <td>title</td>
    <td>My Title</td>
  </tr>
  <tr>
    <td>description</td>
    <td>My Description</td>
  </tr>
 </table>

However, please note that you need access to the script for this approach to work. Otherwise, there isn't a direct way to select such elements.

For more information, refer to the documentation: https://api.jquery.com/contains-selector/

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

Retrieve data from an external source and display it on my website

Is there a way to extract information from the IEEExplore page using Jquery or Javascript? Can the data be retrieved in JSON format for display on another webpage? I am thinking of using something like this: $.get(url,function( data ) { alert( "Dat ...

Complete loading of iframe content on Internet Explorer versions 8 and 9

Having an issue with the full loading of a page in IE8-9. I need to perform certain actions after the content within a div is fully loaded, but it seems that in IE8-9, the page fails to load completely. This is causing problems as my actions are dependent ...

Is AJAX the best way to resize a div on button click?

I am seeking to dynamically change the size of a div element on the client-side. By default, its height is set to 500px, but I want it to increase to 700px when a button is clicked. This task involves an ASP.NET website. I have been instructed to accompl ...

Validating forms using Ajax in the Model-View-Controller

I am facing an issue with my Ajax form, where I need to trigger a JavaScript function on failure. The code snippet looks like this: using (Ajax.BeginForm("UpdateStages", new AjaxOptions { HttpMethod = "POST", OnSuccess = "refreshSearchResults(&apo ...

Uploading files with AJAX in CodeIgniter using Dropzone and CSRF security measures

Utilizing the dropZone JS jQuery plugin in conjunction with CodeIgniter for uploading images has presented an issue. A reset button is available on the form to allow users to upload a new image, but after resetting the form and attempting to upload again, ...

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

Ways to stop the floating label from blending with the input field

Attempting to incorporate the Bootstrap Material design theme into my project, I have implemented a basic text input field using the code below: <div class="form-control-wrapper"> <input class="form-control empty" type="text"></input> ...

Tips on extracting the price from a specific webpage

Upon visiting a specific webpage, you will notice that various items are listed with their prices in Ethereum (ETH) attached to them: Opensea Collection. For instance, consider the item "Bean #7474" displayed below, with a price of "1.37 ETH": https://i.s ...

What could be the reason for my onChange event not functioning properly?

The issue I'm experiencing involves my onchange event not properly copying the text from the current span to the hidden field. Any ideas on why this might be happening? Check out my code at this link. ...

Library of CSS styling information

Has anyone come across a reliable javascript library that can retrieve the original style (not computed) of a specific element in the DOM? Essentially, I am looking for something that can provide results similar to what is displayed in Firebug's style ...

What is the best way to make a single block of javascript code handle multiple ajax requests?

I am looking to streamline the two actions to respond with a single JavaScript template publication.js.erb instead of having a separate file.js.erb for each action. ##AJAX CALLBACKS## def publish @myth = Myth.find(params[:id]) if @myth.update_a ...

What steps can be taken to update the cart if all products have been removed?

How can I implement a refresh for my cart page every time the product length is 0 without causing unreachable code? It seems like there must be a simple solution to this problem. switch (action.type){ case "REMOVE_PRODUCT": return ...

Convert JQuery to a click event

I have a code snippet that is currently functioning properly $(window).load(function(){ $(document).ready(function(){ $("input[name ='_sft_product_cat[]']").parent().next(".children").css("background", "yellow"); }) }); My goal is to convert th ...

When a jQuery ajax request triggers an error event on a successful 200 response

In my ASP.NET Core WebAPI project, I have a GET method in my controller that returns an array of strings: [HttpGet] public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } I'm attempting to call this method using a ...

The placement of term.js is always at the bottom of the body

Seeking help with JavaScript as a beginner, I am facing issues with placing an element in my project. Although I can easily open terminals and write to them, every time I create one, it gets appended at the end of the body. I referred to this example for ...

The issue with CSS Width:100% not functioning properly in Google Chrome

I am currently working on creating a gallery section that includes captions using the figure and figcaption elements. This gallery must be responsive and adapt to varying heights and widths along with their corresponding captions. While everything is func ...

Utilize Angular to connect NavBar partial HTML with a controller variable

Encountering an issue where my search term in the navigation bar is not binding to a controller variable due to it being out of scope. Attempting to utilize ng-model in the partial HTML navbar to connect the input value with the controller variable. Parti ...

What is the trick to shortening paragraphs with dots...?

There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...

Building Valid HTML Strings with Qt4.2's QTextEdit

My goal is to create HTML content to display correctly in a QTextEdit using Qt 4.2 on RHEL 5.3. Although I am not a professional web developer, I believe the HTML generated by my algorithm is valid. 319:14:27:22: <font color="rgb(255,0,0)" bgcolor="r ...

Including JavaScript in HTML Error 404

https://i.stack.imgur.com/aQDPG.png I am struggling to understand why this import is not functioning as expected. I have tried using script/import.js but it still fails to work. The error message I keep receiving is: 127.0.0.1 - - [09/Sep/2020 15:09:35] ...