Question

我花了几天的时间来提出以下内容，现在我意识到它仍然无效。我的“添加行”按钮无法正常工作。我错过了什么？

<table>
    <tr>
        <th>field</th>
        <th>comparison</th>
        <th>value</th>
    </tr>   
    <tr>
        <td>
            <select style="width:5em;" class="field">
                <option>name</option>
                <option>age</option>
                <option>sex</option>
            </select>
        </td>
        <td>
            <select style="width:5em;" class = "comp">
                <option>equals</option>
                <option>starts with</option>
                <option>not equal to</option>
            </select>
        </td>
        <td><input type="text" class = 'value'></td>
        <td><button id="add">Add row</button></td>
    </tr>
</table>

$('#tableSearchMainAccount1 tr').each(function() {
    var td = '';
    // used to skip table header (if there is)
    if ($(this).find("td:first").length > 0) {
        $(this).find('option:selected').each(function() {
            td = td + $(this).text() + ',';
        });
        td = td + $(this).find('input').val();
        filt[ctr] = td;
        ctr += 1;
    }
});
//alert(filt); //alert output like  name,equals,ann,age,equals,11

$('#add').live('click', function() {
    var $lastTr = $('table tr:last');
    console.log($lastTr);
    $lastTr.clone().insertAfter($lastTr);
    // Remove the button from the previous tr, otherwise each row will have it.
    $('#add', $lastTr)
        .replaceWith('<button class="remove_row">Remove row</button>');
});

$('.remove_row').live('click', function() {
    $(this).closest('tr').remove();
});

Answer 1

根据评论中的讨论，您似乎没有引用jQuery。

enter image description here

将以下内容添加到<head></head>部分：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>

还有很多其他CDN可以为您托管jQuery，或者您可以自己下载它。所有这些详细信息都可以在http://jquery.com/download/上找到。

这样您的标记看起来如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>My jQuery Project</title>
        <script src="jquery-1.8.3.min.js"></script>
        <script src="scripts.js"></script>
    </head>
    <body>
        <table>...</table>
    </body>
</html>

请注意，我还引用了另一个名为“scripts.js”的外部文件。这是您可以放置所有JavaScript和jQuery逻辑的地方。

$(document).ready(function(){
    /* Wrapping your code with a document-ready
       block will ensure that the DOM will be
       ready before your code runs
    */
});

Answer 2

替换

<table>

带

 <table id="tableSearchMainAccount1">

将是我10岁的首发。

“添加行”逻辑未按预期工作

2 个答案: