0

私はJQueryを学ぼうと試みてきましたが、本からのこのチュートリアルは本当に困惑しました。私はそれをいくらか単純化したので、可能な限り最も単純な要素/関数を扱っています。このテーブルを定義しました

<table id ="testtable">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <!--@Html.Action("AppointmentData", new { id = Model })-->
    </tbody>
</table>

次のように定義された関数を呼び出すボタンがあります

<input type="button" value="test" onclick="OnSuccess();" />

そして、私はここに私の実際のJqueryを持っています

<script type="text/javascript">
function OnSuccess() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    }
</script>

私を本当に困惑させているのは、実行に失敗するJquery関数です。.empty（）を使用してテーブルを空にすることができ、これを実行することもできます。

$("#tabledata").append("<td>hello</td><td>world</td>")

そして、それはデータを追加しますが、私はそれが行を追加しない理由を私の一生の間理解することができません。表示されるChromeデバッガーのエラーメッセージは「UncaughtTypeError：object isnotafunction」です。これは、テーブル行タグの追加を開始したときにのみ発生します。

編集：

ローカルのjQueryライブラリが奇妙な動作をしていたことが判明しました。誤って変更した可能性がありますか？私がグーグルがホストするライブラリを参照するとすぐにそれは機能しました

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
    $('input[name="testButton"]').click(function () {
        alert('hi');
        $("#testtable tbody").append("<tr><td>hello</td><td>world</td></tr>");
    });
}); 
</script>
4

3 に答える 3

1

<td><tr>s（セル）は（行）でラップする必要があります：

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");

一部のブラウザはこれを自動的に実行しますが、とにかく明示的にラップする必要があります。

jQueryを使用している場合は、インラインハンドラーを使用するのではなく、実際にイベントをバインドする必要があります。たとえば、ボタンに名前を付けて、JSで参照します。

<input type="button" value="test" name="testButton" />

JavaScript：

$(document).ready(function() {
    $('input[name="testButton"]').click(function() {
        $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
    });
});

alert()をanonymous関数に入れて、ハンドラーが実行されていることを確認してください。$(document).ready()また、関数内でjQueryを実行していることを確認してください。$開発者コンソールに入力して、実際にjQueryが含まれていることを確認してください。戻るべきではありませんundefined。

于 2012-08-10T09:26:50.497 に答える
0

わかりました、ただ書いてみてください

$(tabledata).append("<tr><td>hello</td><td>world</td></tr>");

それ以外の

$("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
于 2012-08-10T09:25:56.313 に答える
0

オンクリックはChromeで常に機能するとは限らないため、このようにしてください。
このコードを試して くださいデモを見る

$("#AddRow").click(function() {
    $("#tabledata").append("<tr><td>hello</td><td>world</td></tr>");
})

<table id ="testtable" border="1">
<thead>
<th>Client Name</th>
<th>Appointment Dates</th>
</thead>
    <tbody id="tabledata">
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>01/01/2012</td>
        </tr>
        <!--@Html.Action("AppointmentData", new { id = Model })-->
    </tbody>
</table>

<input type="button" value="test" id="AddRow" />
于 2012-08-10T09:30:46.037 に答える