Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript.

function toggle(button)
{
  if(document.getElementById("1").value=="Show upcoming"){
    document.getElementById("1").value="Show previous";
 
    //hide previous
    document.getElementById("before").style.display="none";
    
    //show upcoming
    document.getElementById("forward").style.display="block";
    
    //attempt at filling whole row
    document.getElementById("forward").style.width="100%";
  }
  else if(document.getElementById("1").value=="Show previous"){
    document.getElementById("1").value="Show upcoming";
    
    //show previous
    document.getElementById("before").style.display="block";
    
    //attempt at filling whole row
    document.getElementById("before").style.width="100%";
    
    //hide upcoming
    document.getElementById("forward").style.display="none";
  }       
}
.table1, .table2{
  width:100%;
}
.table2{
  display:none;
}
<input type="button" id="1" value="Show previous"  onclick="toggle(this);"/>
<table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%">
  <tr>
    <td class="date">
      <div class="datee" align="center">Tommorrow</div>
    </td>
  </tr>
</table>
<table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%">
  <tr>
    <td class="duvha" >
      <div class="datee" align="center">yesterday</div>
    </td>
   </tr>
</table>

javascripthtmlcss

Answer №1

Make sure to utilize display:table rather than display:block.

function toggle(button) {
    if (document.getElementById("1").value == "Show upcoming") {
        document.getElementById("1").value = "Show previous";

        //hide previous
        document.getElementById("before").style.display = "none";
        //show upcoming
        document.getElementById("forward").style.display = "table";
    } else if (document.getElementById("1").value == "Show previous") {
        document.getElementById("1").value = "Show upcoming";
        //show previous
        document.getElementById("before").style.display = "table";

        //hide upcoming
        document.getElementById("forward").style.display = "none";
    }

}
.table1, .table2 {
    width: 100 % ;
}

.table2 {
    display: none;
}
<input type="button" id="1" value="Show previous" onclick="toggle(this);" />
<table class="table1" cellpadding="10" cellspacing="1" border="1" id="forward" width="100%">
    <tr>
        <td class="date">
            <div class="datee" align="center">Tommorrow</div>
        </td>
    </tr>
</table>
<table class="table2" cellpadding="10" cellspacing="1" border="1" id="before" width="100%">
    <tr>
        <td class="duvha">
            <div class="datee" align="center">yesterday</div>

        </td>
    </tr>
</table>

Answer №2

Modify your javascript with the following code snippet. Tables will always be displayed as table elements.

 function toggle(button)
   {
     if(document.getElementById("1").value=="Show upcoming"){
     document.getElementById("1").value="Show previous";

     //hide the previous table
     document.getElementById("before").style.display="none";
     //display the upcoming table
     document.getElementById("forward").style.display="block";
     //try to fill the whole row
     document.getElementById("forward").style.width="100%";
    }

   else if(document.getElementById("1").value=="Show previous"){
document.getElementById("1").value="Show upcoming";
  //display the previous table
 document.getElementById("before").style.display="block";
  //attempt at filling whole row
   document.getElementById("before").style.width="100%";
  //hide the upcoming table
  document.getElementById("forward").style.display="none";
    }

}

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

I'm having trouble executing the JavaScript function

function contentChange(){ var paragraphs = document.getElementsByTagName("p"); for(var i = 0 ; i < paragraphs.length ; i++){ paragraphs[i].innerHTML = "hello" ;}} contentChange(); I'm struggling to change the content of all ...

javascript

Explore and target elements using browser inspection

Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...

htmlcss

The NestJS error code 413 indicates that the payload size is too large for

I am currently utilizing nestjs and have encountered an issue where an endpoint only accepts files via multipart. When attempting to upload files that are less than 10MB, everything works perfectly fine. However, when trying to upload files larger than 10M ...

javascriptnode.jsexpressnestjsmulter

Error message: Laravel unable to locate requested page

Attempting to make a post request using AngularJS in Laravel, I encountered the following error message: Oops! The page you are trying to access could not be found. JAVASCRIPT app.controller('main',['$scope','$http',&apos ...

javascriptphpangularjsajaxlaravel-5

Adding Node Modules during the setup of an ElectronJS application

Hey there! I'm currently working on an ElectronJS application designed for developers. One of the key features is checking for the presence of NodeJS on the user's computer. If it's not detected, the app will automatically download and insta ...

javascriptnpmelectrondesktop-applicationnode-modules

Implementing popup alert for multiple tabs when Javascript session times out

I have implemented javascript setInterval() to monitor user idle time and display a popup alert prior to automatic logout. However, it seems to be functioning correctly only in single tabs. Here is the code snippet: localStorage.removeItem("idleTimeValue ...

javascriptphptabssetintervalsession-timeout

Display the X button solely once text has been inputted into the textbox

I have integrated a text clearing plugin from here in my project to allow users to clear the input field by clicking on an X button. However, I want to modify the code so that the X button only appears when there is text entered in the textbox. I attempt ...

javascriptjquerycss

Tips for creating nested master-detail or master-detail-detail queries in Loopback

My set up includes category and category_subs in a master-detail model, with the post model being linked to category_subs. I have successfully retrieved the master-detail information for both categories, but now I am unsure of how to include the post and e ...

javascriptnode.jsmongodbloopbackjsloopback

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

Placing a freshly created item into a designated array while ensuring it is positioned at Index Value [0] rather than at [arr.length-1]

I understand that it is usually recommended to add new objects at the end of an existing array without a name. However, I am interested in exploring a more complex scenario in order to learn. Specifically, I would like to add a new object at index [0] inst ...

phphtmlarraysjson

Guide to navigating through a webpage to locate the specified element with Selenium

Is there a way to ensure that when scrolling to an element in selenium, it appears at the very top of the browser window rather than just being visible on the page? What steps can be taken to make sure that the element being scrolled to is positioned at t ...

pythonhtmlpython-3.xseleniumselenium-chromedriver

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

javascriptreactjsmouseevent

Invoking functions from controllers to mongoose schema module in Node.js

Greetings everyone, I am fairly new to working with Node.js so let me share my current dilemma. I have set up a mongoose schema for handling comments in the following structure: const mongoose = require("mongoose"); const Schema = mongoose.Schema; const ...

javascriptnode.jsexpressmongoose

Is it necessary for the error event of xmlhttprequest to include an error message?

Currently, I am in the process of developing an AJAX request within a Firefox extension. The following code snippet illustrates my approach: function GetMenu(){ var oReq = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(); ...

javascriptajaxxmlhttprequestfirefox-addon

The second occurrence of a jQuery event

When a user left-clicks on the menu, it should load a view in a draggable box. However, the functionality is not working as expected. Sometimes you need to click twice - the first time the box appears but is not draggable, and the second time a new box app ...

javascriptjquery

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

Is it achievable to dynamically generate new pages on initial load in NextJS?

Right now, I am utilizing getStaticProps and getStaticPaths to pre-render a specific number of articles before my website goes live. This method works effectively, but if a new article is created and displayed on the front page while the site is still acti ...

javascriptnext.js

Is it possible to integrate a jQuery function within PHP code when encountering a "is not defined"

I am looking to implement the jQuery-confirm dialog in place of using a JavaScript alert generated by PHP. However, when I execute the following code, I encounter the following error message: $ is not defined echo "<script>$.alert({title: ' ...

javascriptphpjqueryalert

Enhancing your CircularProgressBar with dual variant colors using Material-UI

Best practices for customizing MUI components with React ...

htmlcssreactjsmaterial-uiweb-frontend

Using a gogocartojs map in your JavaScript project

I have created a new project and am attempting to integrate gogocartoJs into it. While the project itself is functioning properly, I am experiencing issues with the map not displaying as expected. Although I have followed the provided guides, there seems ...

javascripthtmlnpm