单击时似乎没有执行函数

时间:2016-01-14 17:09:19

标签: javascript jquery html

嗯......小说说。在这里,我给你留下链接。 我失去了近4个小时试图让它发挥作用!

当我点击按钮时,我想向表中添加行。但它似乎根本没有做任何事情。

http://jsfiddle.net/QqMsX/24/

<table class="table table-bordered">
<thead>
 <tr>
     <th>Relation</th>
     <th>Column1</th>
     <th>Column2</th>
     <th>Column3</th>
     <th>Column4</th>
     <th>Column5</th>
</tr>
</thead>
    <tbody id = 'FamilyTable'>                          
    </tbody>
</table>                            

<button onclick ="AddRow()" type="button" class="btn btn-primary">Add</button>

和JavaScript代码。

function AddRow() 
{
    var Row = '<tr>'.
               '<td>Data</td>'.
               '<td>Data</td>'.
               '<td>Data</td>'.
               '<td>Data</td>'.
               '<td>Data</td>'.
               '<td>Data</td>'.
               '</tr>'; 

    $(Row).appendTo("#FamilyTable");    
}

1 个答案:

答案 0 :(得分:5)

Javascript中的字符串连接字符为+,而不是.。另请注意,您的原始小提琴不包含jQuery。试试这个:

function AddRow() {
    var row = '<tr>' +
        '<td>Data</td>' +
        '<td>Data</td>' +
        '<td>Data</td>' +
        '<td>Data</td>' +
        '<td>Data</td>' +
        '<td>Data</td>' +
        '</tr>';
    $(row).appendTo("#FamilyTable");
}

Updated fiddle

更好的选择是使用Javascript附加您的活动,以避免过时的on*属性。像这样:

<button type="button" class="btn btn-primary">Add</button>
$(function() {
    $('button').click(function() {
        var row = '<tr>' +
            '<td>Data</td>' +
            '<td>Data</td>' +
            '<td>Data</td>' +
            '<td>Data</td>' +
            '<td>Data</td>' +
            '<td>Data</td>' +
            '</tr>';
        $(row).appendTo("#FamilyTable");
    });
});

Example fiddle