Assigning An Html Value To A Javascript Variable

I have the following Javascript function that allows me to add a new row to my table: $(function() { var $table = $('table.pv-data'), counter = 1; $('a.add-author').click(fun

Solution 1:

The following lines need to be replaced

1. '<td><select name="state' + counter + '"/>...'. Is not correct as you are closing the select tag too early.
2. '<td><a href="#" class="remove">remove</a></td>'. You are missing + at the end.

by these replacements:

1. '<td><select name="state' + counter + '">...'.
2. '<td><a href="#" class="remove">remove</a></td>' +

Note: Replacement#2 is pointed out in the comments.

Solution 2:

Take away the self-closing tag from the end of the opening select tag and remove the space between the value= "persil" in both of the option elements. Also add a + to concatenate the final </tr>.

var newRow = 
    '<tr>' + 
        '<td><inputtype="text"name="id' + counter + '"/></td>' +
        '<td><selectname="state' + counter + '"><OPTIONvalue="persil">Persil</OPTION><OPTIONvalue="other">Other</OPTION></select></td> ' +
        '<td><inputtype="text"name="longitude' + counter + '"/></td>' +
        '<td><inputtype="text"name="latitude' + counter + '"/></td>' +
        '<td><inputtype="text"name="altitude' + counter + '"/></td>' +
        '<td><inputtype="text"name="module_tilt' + counter + '"/></td>' +
        '<td><ahref="#"class="remove">remove</a></td>' +
    '</tr>';

Having the self closing tag at the end of an element (the slash at the end, as in <img src="..." />) is only for elements without an independent closing tag, so for something like <select> you do not need it as this function is fulfilled by the </select>.

Solution 3:

You have a problem in this line:

'<td><selectname="state' + counter + '"/><OPTIONvalue= "persil">P

The select have it own closing tag it must be like this

'<td><selectname="state' + counter + '"><OPTIONvalue= "persil">P