0

我花了好几天才想出以下内容，现在我意识到它仍然不起作用。我的“添加行”按钮无法正常工作。我错过了什么？

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

2 回答 2

1

从评论中的讨论来看，您似乎没有引用 jQuery。

在此处输入图像描述

将以下内容添加到您的<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
    */
});
于 2012-11-27T15:45:39.883 回答
0

代替

<table>

和

 <table id="tableSearchMainAccount1">

将是我 10 岁的首发。

于 2012-11-27T15:31:23.080 回答