Dynamic id creation with Javascript

Question

I am creating a table that changes size based on a javascript array. I am modeling reservations and when the page loads it loops through an array of reservation objects and creates a table to represent them. I have a checkbox created as the first element of each row as such:

checkboxCell.innerHTML = "<input type='checkbox'>";

I want to be able to know which row(or checkbox) I am clicking when they are pressed. Since these are being creating in one line, they would all have the same ID. So I either need a way to know where I am in the table or a way to create a different ID for each of these elements.

Do yourself a big favor and start using a library like Knockout.js. It will make your life so much easier. — connexo
– connexo, Commented Sep 28, 2015 at 22:44

bunnmatt · Accepted Answer · 2015-09-28 22:56:46Z

2

You can generate incremental ID's for your new elements within the loop which is creating the new HTML elements, e.g. assuming you're appending inputs to an element with an ID of parent-element:

    function makeElements(){
      var parent = document.getElementById('parent-element');
      for (var i = 1; i < 11; i++) {
        var newElement = document.createElement('input');
            newElement.id = 'input-number-' + i;
            newElement.type = "checkbox";
        parent.appendChild(newElement);
      }
    }

As commented by connexo however you are probably better off using an existing library to take care of this sort of thing.

answered Sep 28, 2015 at 22:56

bunnmatt

81712 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic id creation with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related