Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold).

Once the Mars column is removed, I want the Venus column and its data values to be centered in the table.

Check out the example here: http://jsfiddle.net/bL44n3aj/3/

After removing the Mars column, this is the desired output: http://jsfiddle.net/2Lcsc2go/

This is my CSS and HTML code:

td{
  border:1px solid #000;
  
}
th{
  border:1px solid red;
  font-weight:normal !important;
}

tr.sub-header th{
  text-align:center !important;
   border:1px solid blue !important;
   font-weight:bold !important;
}

tr.sub-header-value td{
  text-align:center !important;
  font-weight:bold !important;
}
<table width="80%">
  <tr>
  <th>Produced</th>
    <th>Sold</th>
    <th>Produced</th>
    <th>Sold</th>
  
    </tr>
  <tr class="sub-header">
    <th colspan="2">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
   <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr class="sub-header-value">
     <td colspan="2">Mars data</td>
    <td colspan="2"> Venus data </td>
    
  </tr>
  
  <tr>
 
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
   <tr class="sub-header-value">
     <td colspan="2">Mars data</td>
    <td colspan="2">Venus data</td>
    
  </tr>
</table>

<input type="checkbox"> Remove Mars

javascriptcss

Answer №1

This method may seem a bit unconventional. To improve its efficiency, consider assigning classes to each individual td element.

Using jQuery here - would you prefer a JavaScript alternative?

$(function(){
  var removed = false;
  $("#removeMars").click(function(){
    if (!removed) {
      $.each($("#t tr"), function(){
        var tds = $(this).find("th, td");
        if (tds.length == 2) {
          $(tds[1]).attr("colspan", "4");
          $(tds[0]).remove();
        }
      })
      removed = true;
    }
  })
})
td{
  border:1px solid #000;
  
}
th{
  border:1px solid red;
}

tr.sub-header th{
  text-align:center !important;
   border:1px solid blue !important;
   font-weight:bold !important;
}

tr.sub-header-value td{
  text-align:center !important;
  font-weight:bold !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="t" width="80%">
  <tr>
  <th>Produced</th>
    <th>Sold</th>
    <th>Produced</th>
    <th>Sold</th>
  
    </tr>
  <tr class="sub-header">
    <th colspan="2" >Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
   <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr class="sub-header-value">
     <td colspan="2">Mars data</td>
    <td colspan="2"> Venus data </td>
    
  </tr>
  
  <tr>
 
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
   <tr class="sub-header-value">
     <td colspan="2">Mars data</td>
    <td colspan="2">Venus data</td>
    
  </tr>
</table>
<input type="checkbox" id="removeMars"> Remove Mars

Answer №2

Here is the finalized Solution:

 $(function(){
  var eliminated = false;
 $("#removeMars").change(function(){
        if(this.checked) {
    if (!eliminated) {
      $.each($("#t tr"), function(){
        var tds = $(this).find("th, td");

        if (tds.length == 2) {
          $(tds[1]).attr("colspan", "4");
          $(tds[0]).hide();

        }
      })
      eliminated = true;
    }
    }
    else{
         $.each($("#t tr"), function(){
        var tds = $(this).find("th, td");

        if (tds.length == 2) {
          $(tds[1]).attr("colspan", "2");
          $(tds[0]).show();

        }
      })    
      eliminated = false;
    }

  })
})

Access this Fiddle link : http://jsfiddle.net/qLo60ux8/

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

What is the best way to add a background image to a div using react?

My images folder contains 2 images. See the code snippet below from App.js: import "./styles.css"; import nf_logo from "./images/netflix_logo.png"; import nf_bg from "./images/netflix_bg.jpg;; const divStyle = { backgroundImag ...

javascriptreactjs

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

phpjavascripthtml

One click wonder: Easily print any webpage content with just the click of a button!

For example, upon clicking the button on my webpage, I want the content of another page to be sent directly to a printer. The objective is to bypass the print dialog box and print preview that typically appears when using the browser's default printin ...

javajavascriptjquery

Obtaining visuals in a specific manner

I have a customized slider (flexslider) with 10 images per slide. The images are currently manually inserted, but I want to optimize the slider to dynamically extract images using PHP. However, my current setup only displays one image per slide. How can I ...

phphtmlcss

Navigating through the features of www.addthis.com is simple and straightforward

I am looking to integrate the addthis.com plugin into my website. Specifically, I want to pass my own data to the plugin when users click on the email link. This data should then be sent to the client. Is there a way to achieve this? ...

c#javascript

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascripthtmlcssajax

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

cssxmlviewodooopenerp-7

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...

javascriptpythonhtmlseleniumselenium-webdriver

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

jquerycsswordpresscookies

Is there a way to acquire and set up a JS-file (excluding NPM package) directly through an NPM URL?

Is it feasible to include the URL for the "checkout.js" JavaScript file in the package.json file, rather than directly adding it to the Index.html? Please note that this is a standalone JavaScript file and not an NPM package. The purpose behind this appr ...

javascriptnode.jsnpmwebpacknpm-install

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

Modify the event from creating a table on click to loading it on the page onload

Hey there, friends! I've been brainstorming and came up with an idea, but now I'm stuck trying to switch the code to onload(). I've tried numerous approaches, but none seem to be working for me. Below is the code I've been working wit ...

javascriptjson

I am experiencing issues with my Vue.js application when trying to send an HTTP POST request

I am encountering an issue in my Vuejs application while trying to send an HTTP POST request to my server. The error message that keeps popping up in the console is: TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.post is not a function at Object ...

javascriptvue.jspostaxios

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for: To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript: $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-men ...

htmlcsstwitter-bootstrap

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

Are Node environment variables persistent?

First Example: package.json Scripts "scripts": { "start": "node app.js", "test": "NODE_ENV=test mocha --reporter spec" }, Command to Run Test: if (process.env.NODE_ENV === "test") { cons ...

javascriptnode.jspackage

Leveraging javascript to invoke a controller function within the MVC framework

My objective is to make a table row act as a link to redirect users to another view on my MVC website. Instead of using the conventional "Details" link generated by the table list, I want the entire row to serve as the link to the "Details" view. In order ...

javascriptjqueryajaxasp.net-mvc

How can I prevent my code from resetting every time a state update occurs?

I've coded a program that creates a 10x10 grid with 5 boxes of varying sizes. When you click on a box, an x is added to its content and the turn state is set to false. The issue arises when the code re-runs after each state update, causing the 5 rand ...

javascriptreactjs

Utilizing AJAX to send an array of data in JSON format

I have successfully extracted specific elements from a form, stored them in an array and now want to convert this array into a JSON object to send it to a PHP file via AJAX. However, I am facing some issues with my code. Here's what I have done so far ...

javascriptphpjsonajax

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

javascriptjqueryhtmlcss