0

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'

4
  • 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. Commented Jul 6, 2020 at 15:19
  • 1
    concat and not append as newRowVariable is a string and not an HTMLelement
    – 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++ Commented Jul 6, 2020 at 15:23
  • document.onload = $globalIterationVariable = 1; This should initiate a global variable once the page loads.
    – rogaloo
    Commented Jul 6, 2020 at 15:24

2 Answers 2

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 ;)

1
  • 1
    Thank you! This seems interesting and worth learning for me :)
    – rogaloo
    Commented Jul 6, 2020 at 15:33
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>";
2
  • 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++
    – rogaloo
    Commented Jul 6, 2020 at 15:25
  • To be a global variable, it must be declared outside of a local scope. Such as at the top of the script.
    – John
    Commented Jul 6, 2020 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.