Button click causing display block to fail on HTML table rendering

Upon page load, I have two tables that are hidden. Depending on a condition, one table should display and the other should hide, or vice versa. The issue is that the table is not displaying as expected when triggered.

I attempted to use jQuery to hide the table, but there was a brief moment where users could see the table for 1-2 seconds upon page load. To address this, I decided to hide the table using CSS display:none instead.

Question 1: How can I ensure the table functions correctly upon action? Question 2: How do I ensure that the displayed table appears in the same position while hiding the other?

Below is my code:

document.getElementById("test1").style.display="block";
document.getElementById("test2").style.display="none";
#test1,#test2{
    display:none;
}
<table id="test1" class="display" width="100%" border="1">
  <tr>
    <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
    <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
  </tr>
</table%26gt;
<table id="test2" class="display" width="100%" border="1">
  <tr>
    <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
    <td><b>Source :</b> <label for="source" style="vertical-align: middle">></label></td>
  </tr>
</table>

javascripthtmlcss

Answer №1

const button1 = document.getElementById('btn-primary');
const button2 = document.getElementById('btn-secondary');

button1.addEventListener('click', function() {
  document.getElementById("show-table").style.display = "block";
  document.getElementById("hide-table").style.display = "none";
});

button2.addEventListener('click', function() {
  document.getElementById("display-table").style.display = "block";
  document.getElementById("disappear-table").style.display = "none";
});

Live Example

If you're using jQuery (mentioned but not tagged), the code can be simplified:

$('#button1').click(function() {
  $('#table-show').show();
  $('#table-hide').hide;
});

$('#button2').click(function() {
  $('#table-display').show();
  $('#table-disappear').hide;
});

Another Live Demo

Answer №2

Perhaps this solution could be of assistance.

function hideElement(id) {
    document.getElementById(id).style.display = 'none';
}

function showElement(id) {
    document.getElementById(id).style.display = 'block';
}

showElement('test1');
hideElement('test2');
<table id="test1" class="display" width="100%" border="1">
    <tr>
        <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
        <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
    </tr>
</table>
<table id="test2" class="display" width="100%" border="1">
    <tr>
        <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
        <td><b>Source :</b> <label for="source" style="vertical-align: middle"></label></td>
    </tr>
</table>
<button onclick="showElement('test1');hideElement('test2')">Display table 1</button>
<button onclick="showElement('test2');hideElement('test1')">Display table 2</button>

Answer №3

Is this what you're looking for?

<html>

<head>

</head>


<body>
    <style>
        #test1,
            #test2 {
                display: none;
            }

        </style>

    <table id="test1" class="display" width="100%" border="1">
        <tr>
            <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
            <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
        </tr>

    </table>
    <table id="test2" class="display" width="100%" border="1">
        <tr>
            <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
            <td><b>Source :</b> <label for="source" style="vertical-align: middle"></label></td>
        </tr>
    </table>
    <input type="button" value="tbl1" onclick="open1()">
    <input type="button" value="tbl2" onclick="open2()">

    <script>
        function open1() {
            document.getElementById("test1").style.display = "block";
            document.getElementById("test2").style.display = "none";

        }

        function open2() {
            document.getElementById("test2").style.display = "block";
            document.getElementById("test1").style.display = "none";

        }

    </script>

</body>

</html>

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

Transfer the function reference to a standalone JavaScript file for use as a callback function

In an effort to streamline my ajax calls, I have developed a JavaScript file that consolidates all of them. The code snippet below illustrates this common approach: function doAjax(doAjax_params) { var url = doAjax_params['url']; var re ...

javascriptajax

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

What is the purpose of employing useMemo in the Material-UI autocomplete documentation?

My focus is on this specific demo in the autocomplete documentation. In the google maps example, there is a throttled function that is returned from a useMemo with an empty array as the second parameter. However, it raises the question of what exactly is ...

javascriptreactjsautocompletematerial-ui

An object is not defined in the following scenario

I currently have a custom function that includes the following code snippet: 1: var object = get_resource($scope, CbgenRestangular, $stateParams.scheme_id); 2: console.log(object) This function triggers the following code: get_resource = function ($sc ...

javascriptangularjs

JavaScript and MongoDB issue -- TypeError: Unable to access properties of an undefined value (attempting to read 'collection')

Encountered an error in the terminal or command prompt as discussed below: The specific error message is: const taskCollection = db.collection('tasks'); ^ TypeError: Cannot read properties of undefined (reading &ap ...

javascriptmongodbtypeerrorurimongodb-compass

Tips on adjusting the color of a link once it has been clicked?

Looking for a link with a specific style? a { color: #999; &:hover { color: #008da0; } &:visited { color: #999; } /* I added this to test if it's gonna fix it, but it didn't */ } Upon clicking the link, it turns blue and remains s ...

htmlcss

Best Practices for Uploading Large Files in ASP.NET: how to do it right?

What are the current recommended methods for uploading large files using ASP.NET Web Forms and/or MVC without encountering timeouts? Adjust Server.ScriptTimeout for the specific POST request; Consider utilizing client-side flash uploaders such as swfup ...

.netjavascriptflashuploadclient-side

Having trouble getting an Angular directive to bind a click event to an external element?

I've been working on creating a unique custom event for toggling with Angular. The directive I'm using is called toggleable. It may sound simple at first, but the tricky part is that I want to be able to use any button or link on the page for to ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Extract data from JSON in Google Sheets

UPDATE: entry.content.$t is actually not the correct field to access individual cells. The proper method is using entry.gsx$[cell column header]. Thank you for pointing out this mistake and assisting in finding a solution. Initial inquiry: I am currently ...

javascriptjsongoogle-apigoogle-sheets

Mastering the art of utilizing drag and drop features for both columns and rows in a React Table within ReactJS

I have managed to create a React Table with columns and rows, but now I'm looking to incorporate drag and drop functionality for both. Does anyone know how I can achieve this? Feel free to check out my CodeSandbox Sample here - https://codesandbox.io ...

javascriptreactjsreact-table

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

Recently, I delved into the topic of creating a responsive sidebar menu in Bootstrap 4. After exploring various solutions, I opted for an alternate version. Here's the HTML code snippet that I implemented: <div class="container-fluid"> < ...

htmlcsstwitter-bootstrapsidebar

The values of React children props will always remain consistent

While attempting to incorporate an ErrorBoundary HoC component for error handling following the guidelines from React16 documentation, I designed the ErrorBoundary component as a PureComponent. It became apparent that the children props remained consistent ...

javascriptreactjsreact-router

Encountering a "file or directory not found" error during the installation of ply using

I recently stumbled upon an interesting project for testing Rest APIs. I was in the process of installing ply from https://github.com/ply-ct/ply npm install ply-ct --save-dev Encountered this error, wondering if anyone has a solution npm WARN saveError EN ...

javascriptnode.jsweb-servicesnpmautomated-tests

What could be the reason behind npm trying to utilize a package version that is not specified in my package.json file?

My Angular and .NET 5 web application is encountering an issue when trying to install packages using the command npm i. The error message that appears is: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While re ...

javascriptnode.jsangularnpm

Images showing Strava heat maps retrieved through API

Check out this amazing heatmap created by Strava! I'm curious about how they were able to achieve this - it seems like they are using the API to request overlay images based on the network tab. I have my own geo data, but I'm wondering how I can ...

javascriptnode.jsmapboxmapbox-gl-jsmapbox-gl

Experimenting with the inner workings of a method by utilizing vue-test-utils alongside Jest

Is there a way to properly test the internal logic of this method? For instance: async method () { this.isLoading = true; await this.GET_OFFERS(); this.isLoading = false; this.router.push("/somewhere"); } This method toggles isLoading, ...

javascriptunit-testingvue.jsfrontendvue-test-utils

Adjustable div with varying positions and dimensions

Hey there! I'm currently working on creating a page with a variable number of resizable divs. These divs can be resized horizontally using Bootstrap's col classes (col-2 through col-12), and vertically with no limits. Additionally, new divs can b ...

cssbootstrap-4gridresizeposition

Issues with incorrect sizing in Safari when using rem units alongside animations

UPDATE: After further testing, it appears that the code functions correctly within the SO snippet view. To replicate the issue, please copy the code and save it locally. UPDATE 2: Odd behavior detected. Refer to this gist and video for more information. ...

htmlcsssafaribootstrap-4

Configure UL element as a dropdown on mobile devices and expand it to full width on desktop screens

Circumstances This HTML code is intended to create a horizontal <ul> element that spans the entire width of the <div class="list__wrapper"> container on desktop screens with a minimum width of 1024px. However, for mobile devices with a maximum ...

jqueryhtmlcsshtml-lists

Problem with sending a form using Ajax

I've set up a page that dynamically generates a list of items. Each item in the list includes a button to submit a form with data specific to that item (the sorting is working correctly). The form submission is handled by the following jQuery code: & ...

phpjqueryhtml