asked on

Adding Row and Cell on a table

Hi Experts, I have two tables named, “myTable” and “sTable.” On my “myTable” I put a button named, “AddItem” with the purpose of adding Row and Columns to sTable. On my first script, I put some codes to determine the Index of the cell where the AddItem button resides. So that when the AddItems button hit by the user it will add a Row on a sTable Table. On the other hand when the user hit the other button there will no action happens. Here, when the user click the AddItem button in the myTable it will call the other function named, ProceedAddItem. In here will process to obtain the data from myTable and add to sTable. When I run the program it works on the first click only, while on the second click the items will add but becomes double, and triple on the next click. The code I made was so very long and complicated, and I believe experts have a short formula on this, so I hope you can modify and give some techniques to achieve my target. I have attached the codes here so that experts can understand what I’m talking about. Your help is greatly appreciated!
Filter.html

Julian Hansen

The problem is you are calling addEventListener every time you click the addItem button.

You should add your event listener's when the page loads and then handle the clicks on the button separately.

Question: are you able to use jQuery or does this have to be plain JavaScript?

Whing Dela Cruz

ASKER

Hi Julian, You said "event listener's" How to do that? I'm having plain JavaScript. Thanks!

Julian Hansen

Look at your AddItem function. This is called EACH time the Add Button is pressed.

function AddItem()
   {
      var table = document.getElementById('myTable');
      for(var i = 0; i < table.rows.length; i++) 
      {
          // EVERY TIME YOU CLICK ADD THIS CODE RUNS
          table.rows[i].addEventListener('click', function() {
              var msg = ' ';
              for(var j = 0; j < this.cells.length; j++)
              {
                  var a = this.cells[0].innerHTML
                  var b = this.cells[1].innerHTML
                  var c = this.cells[2].innerHTML
              }
                   addTableFunction(a,b,c,'140px');
          });
      }
   }

Open in new window

You need to take the adding of the event listener out of the code that adds the item - however the way you have coded it needs a bit of rework.

Is there any particular reason you cannot use jQuery - it would make the solution a lot easier?

Whing Dela Cruz

ASKER

It looks like unfamiliar to me the jQuery but jQuery is running on my pc. Thanks!

Julian Hansen

jQuery is JavaScript - it is a JavaScript library that makes working with the DOM much easier. I am not certain if your response means you can or you cannot use jQuery.

Whing Dela Cruz

ASKER

Yes Julian, I want also to learn jQuery. If you can give me a solution to answer this problem I will really appreciate it whether jQuery or .js . Thank you!

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Whing Dela Cruz

ASKER

Hi Julian, The code you made is working very well. But please allow me to ask this, about the jQuery.js you provided on the codes (<script src="http://code.jquery.com/jquery.js"></script>). I downloaded it and put it to my WebFolder and the codes run very well. My concern is, I need to view and study how the code runs inside the .js. As i open it, I found lots of codes where i believed not the part of the issue. Could you provide me what exactly code needs to use that is inside the js? My purpose is for me to learn how the js works. Thank you!

Julian Hansen

If you want to learn about jQuery you can start here
https://learn.jquery.com/
and
https://www.w3schools.com/jquery/

Looking at the source is good - but first get a grounding in the basics.

Whing Dela Cruz

ASKER

Hi Julian, Thank you for referring to me the site about jQuery. I have some error found in the solution you have provided to me above where when I press the AddItem Button from myTable the AddItem will also added to sTable. I tried to fix it many times but have found no solution. Thanks!

Julian Hansen

Unfortunately my psychic powers are on the fritz today so I am going to have to ask you to describe the error and post your code.

Whing Dela Cruz

ASKER

Hi, I think I've found the error then I'll post it later after verifying it. Thanks!

Whing Dela Cruz

ASKER

Thank you Julian, your solutions were perfectly answered my needs. The error i have encountered using the codes was my fault coding the wrong input. But right now, I enjoy using the code. Thank you so much for your generosity. God bless you and more power to you sir!

Julian Hansen

You are most welcome - good luck with your project.