JavaScript - Dynamically add table rows in HTML table

Question

I have the following script by which I want to achieve to dynamically add rows in an HTML table on my website:

<script>
var globalIterationVariable = 0;
document.onload = $globalIterationVariable = 1;
$('document').ready(function() {
  $('.add_another').click(function() {
      var globalIterationVariable;
      var newRowVariable = '<tr><td><center><input name="nazovPolozky';
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append(' type="text"></center></td> <td><center><input name="pocetPolozky');
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append('" type="number" step="1" min="1"></center></td> <td><center><input name="jednotkovaCenaPolozky');
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append('" type="number" step="0.01" min="0.01"></center></td></tr>');
      alert(String(newRowVariable));
      $("#tbl").append(String(newRowVariable));
      globalIterationVariable++
   });
});
</script>

This script though gives me the following error:

Uncaught TypeError: newRowVariable.append is not a function

Can anybody, please, help me to get this script working?

Thank you.

P.S.: This script is launched once I press a specific button on my website which has a class='button add_another'

string append? not sure where you got that from. There is no append for strings just like the error states. Learn about string template literals. It will make it easier to read. — epascarello
– epascarello, Commented Jul 6, 2020 at 15:19
concat and not append as newRowVariable is a string and not an HTMLelement — Greedo
– Greedo, Commented Jul 6, 2020 at 15:20
document.onload = $globalIterationVariable = 1; <-- what is that doing? You also redeclare ` var globalIterationVariable;` inside so when you do globalIterationVariable++ you are doing undefined++ — epascarello
– epascarello, Commented Jul 6, 2020 at 15:23
document.onload = $globalIterationVariable = 1; This should initiate a global variable once the page loads. — rogaloo
– rogaloo, Commented Jul 6, 2020 at 15:24

Saucy · Accepted Answer · 2020-07-06 15:31:01Z

1

You should define newRowVariable as a DOM element ->

const newRowVariable = document.createElement('tr')

Then append the content (your string) to it ->

newRowVariable.innerHTML = `<td><center><input name="nazovPolozky ${$globalIterationVariable}" type="text"></center></td>

Notice I use `` and not '' or "", it's because you can use javascript variables inside a string like that ->

const text = "World"
const superString = `Hello ${text}`
// a console.log(superString) will return 'Hello World'

Jquery might be usefull when you are a complete begginner, but you'll figure out soon that it's way simpler to use pure javascript ;)

answered Jul 6, 2020 at 15:31

Saucy

1231 silver badge5 bronze badges

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

1 Comment

rogaloo Over a year ago

Thank you! This seems interesting and worth learning for me :)

John · Accepted Answer · 2020-07-06 15:20:21Z

0

This is a string

 var newRowVariable = '<tr><td><center><input name="nazovPolozky';

This is a jQuery object

 var newRowVariable = $('<tr><td><center><input name="nazovPolozky');

This is how you append a string to a string

 var newRowVariable = '<tr><td><center><input name="nazovPolozky';
 newRowVariable += "/></td></tr>";

answered Jul 6, 2020 at 15:20

John

6,3274 gold badges48 silver badges93 bronze badges

2 Comments

rogaloo Over a year ago

Thank you! This works! I have another question though, how come globalIterationVariable++ does not always gives me it's value +1? UPDATE: Nevermind, I fixed it by: $globalIterationVariable++

John Over a year ago

To be a global variable, it must be declared outside of a local scope. Such as at the top of the script.

Collectives™ on Stack Overflow

JavaScript - Dynamically add table rows in HTML table

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related