将HTML值分配给JavaScript变量

Question

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(function(event){
    event.preventDefault();
    counter++;            
var newRow = 
        '<tr>' + 
            '<td><input type="text" name="id' + counter + '"/></td>' +
            '<td><select name="state' + counter + '"/><OPTION value= "persil">Persil</OPTION><OPTION value= "other">Other</OPTION></select></td> ' +
            '<td><input type="text" name="longitude' + counter + '"/></td>' +
            '<td><input type="text" name="latitude' + counter + '"/></td>' +
            '<td><input type="text" name="altitude' + counter + '"/></td>' +
            '<td><input type="text" name="module_tilt' + counter + '"/></td>' +
            '<td><a href="#" class="remove">remove</a></td>'
        '</tr>';
    $table.append(newRow);
    });
});

Everything is working fine, just the part where I have to select between the options:"Persil" or "Other" is not working. it's not showing the different options.

Answer 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.

Answer 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><input type="text" name="id' + counter + '"/></td>' +
        '<td><select name="state' + counter + '"><OPTION value="persil">Persil</OPTION><OPTION value="other">Other</OPTION></select></td> ' +
        '<td><input type="text" name="longitude' + counter + '"/></td>' +
        '<td><input type="text" name="latitude' + counter + '"/></td>' +
        '<td><input type="text" name="altitude' + counter + '"/></td>' +
        '<td><input type="text" name="module_tilt' + counter + '"/></td>' +
        '<td><a href="#" 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> .

Answer 3

You have a problem in this line:

'<td><select name="state' + counter + '"/><OPTION value= "persil">P

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

'<td><select name="state' + counter + '"><OPTION value= "persil">P