Question

我有以下Javascript函数，允许我在表中添加一个新行：

$(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);
    });
});

一切正常，只是我必须在选项之间进行选择的部分：“Persil”或“Other”无法正常工作。它没有显示不同的选项。

Answer 1

需要更换以下行

'<td><select name="state' + counter + '"/>...'。因为你太早关闭了select标签，所以不正确。
'<td><a href="#" class="remove">remove</a></td>'。您最后遗漏了+。

通过这些替换：

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

注意：评论中指出了替换＃2。

Answer 2

从开头select标记的末尾删除自闭标记，并删除两个value= "persil"元素中option之间的空格。同时添加一个+来连接最终的</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>';

在元素末尾使用自闭项标记（结尾处的斜杠，如<img src="..." />中所示）仅适用于没有独立结束标记的元素，因此对于像<select>这样的内容不需要它，因为</select>已完成此功能。

Answer 3

您在此行中遇到问题：

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

select有自己的结束标记，它必须像这样

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

将HTML值分配给JavaScript变量

3 个答案: