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>

jQuery をホストする CDN は他にもたくさんありますが、自分でダウンロードすることもできます。これらの詳細はすべて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 に答える