Click here to Skip to main content
15,040,212 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have one main html page, with sidebar (with two different links) and one section in which I have to show table, depending on which links in sidebar I click.

First link shows table with users in the section, and if I click on second link it will show table of cities in the same section. I am not reloading header of the page and sidebar, but ONLY section part in which the tables (one at the time) will be shown. Both of the tables will have buttons Add, Edit, Delete.

I am doing that with javascript and ajax call.

The problem is when I click on the firts link on the sidebar, the table of Users will be shown on the page and all buttons are properly working.

After that I click on second link on the sidebar and the table of Cities will be shown, but the buttons are not working.

When I return again on the first link of sidebar, even those buttons which were previously working, are not working now.

How to solve this issue?

Thank you

What I have tried:

Tried browsing to find the problem, but couldn't solve it
Updated 17-Nov-19 3:33am

1 solution

I don't understand your problem fully but I will try my level best to explain.

Your problem is:
1. You have a button which is not working
2. You need to show tables on the link/button is pressed.

Here an example code for your learning


<!DOCTYPE html>
	<title>Buttons and Tables</title>
	<script type="text/javascript">
		// For showing and hiding table
		function show_table(_id)
			let div = document.getElementById(_id);
			// If not displayed
			{ = "block"; // then display
			{ = "none"; // hide

		// For adding rows
		function add_row(_id)
			let table_one = document.getElementById(_id);
			let row =table_one.insertRow(-1);
			let c1 = row.insertCell(0);
			let c2 = row.insertCell(1);
			c1.innerText ="SOMETHING";
			c2.innerText ="SOMETHING";
		A section of code can be wrapped into a conatiner called div.
		id is an unique identifier for div. We will create two div's with two tables.
	<div id="div_one" style="display: none;">
		<table id="table_one" border="1">
					<th>SNO FOR TABLE 1</th>
					<th>NAME FOR TABLE 1</th>
				<!-- Do something -->

	<div id="div_two" style="display: none;">
		<table id="table_two" border="1">
					<th>SNO FOR TABLE 2</th>
					<th>NAME FOR TABLE 2</th>
				<!-- Do something -->

	<!-- Button 1 when clicked will show table 1 and Button 2 will do the same for table 2. Clicking the same button
	will do vice versa -->
	<!-- this.value takes the data from value attribute in the present tag which is button here-->
	<button type="button" onclick="show_table(this.value);" value="div_one">SHOW TABLE 1</button>
	<button type="button" onclick="show_table(this.value);" value="div_two">SHOW TABLE 2</button>

	<!-- Add rows in tables -->
	<button type="button" onclick="add_row(this.value)" value="table_one">ADD A ROW IN TABLE 1</button>
	<button type="button" onclick="add_row(this.value)" value="table_two">ADD A ROW IN TABLE 2</button>
Sinisa Janjetovic 17-Nov-19 9:39am
Thank you.

Actually, my problem is not with showing the tables, I succeeded that. Each table has belonging three buttons (Add, Edit, Delete).

The problem is when I get table 1, all buttons are working. After that, I go to table 2 and all three buttons that belong to Table 2 now are not working. After that, I go back to Table 1 and the Table 1 buttons which have been working properly, now they don't work.

Have I been more clear now?
Visweswaran N 17-Nov-19 9:42am
Could you share the code?
Sinisa Janjetovic 17-Nov-19 10:24am
It is too large, several files. Is there any way to send to you in direct message?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900