0

これはおそらくhtml5の経験不足によるものですが、JavascriptとTBODYタグノードを使用してテーブルに行を動的に追加するのに最適なコードがいくつかありますが、ページに複数のテーブルがある場合(私はそうしています)データが入力されるときに動的に入力する必要がある....うまくいかない...

私の問題は、情報も追加したいセクションを参照する方法がわからないことです。

特定のタグでノードを作成しようとしましたが、認識されたタグではないため、データは追加されましたが、テーブル内には追加されませんでした...奇妙なことに。

これが私が使用しているJavascriptコードです

document.getElementById("sendNoteToDispatch").onclick=function()
    {
        event.preventDefault();
        console.log("Made it to note entry.");
        var noteTxt = $('#noteEntry').val();
        var noteEntBy = 'BGM';
        var nowNote = Date();
        var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
        if (!document.getElementsByTagName) return;
        tabBody=document.getElementsByTagName("TBODY").item(0);
        row=document.createElement("TR");
        cell1=document.createElement("TD");
        cell2=document.createElement("TD");
        cell3=document.createElement("TD");
        textnode1=document.createTextNode(noteEntDate);
        textnode2=document.createTextNode(noteEntBy);
        textnode3=document.createTextNode(noteTxt);
        cell1.appendChild(textnode1);
        cell2.appendChild(textnode2);
        cell3.appendChild(textnode3);
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        tabBody.appendChild(row);
        document.getElementById("noteEntry").value = '';
        document.getElementById("noteEntry").focus();
       }

});

これが動作するhtmlコードです。

<div id="Notes" class='acceptEnterNotes'>
            <form>
                <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" />
                <button type="submit" id="sendNoteToDispatch" class="noteEntryButton buttonAddNote" value="Submit">
                    Submit Note
                </button>
            </form>
            <br />
            <br />
            <div id="filterNotesGriddiv">
                <input type="text" name="filterNotesGrid" id="filterNotesGrid" class="tableFilterInput" size="75" placeholder="Search the Table Below..." />
            </div>
            <div id="notesEntered">
                <table id="notesEnteredGrid" class="lowerSectionTable">
                    <tbody>
                        <tr class="enteredNotesHeader">
                            <td class="tableHeaderCells cellDateEntered">Date Entered</td><td class="tableHeaderCells cellEnteredBy">Entered by</td><td class="tableHeaderCells cellNoteEntered">Note</td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>

tbody タグを tbodyNotes のようなものに変更しようとしましたが、うまくいきませんでした。次に、ID を tbody ノードに追加しようとしましたが、どちらもうまくいきませんでした。別のテーブルを持つ別のセクション...素晴らしいでしょう。

4

1 に答える 1

2

したがって、現時点では、次のページで最初の TBODY タグを取得しています。

tabBody=document.getElementsByTagName("TBODY").item(0);

次に、セルの行を作成し、その行を次のように tbody に挿入します。

tabBody.appendChild(row);

内部に TBODY を含む別のテーブルをページに配置する場合、2 番目のテーブルの TBODY タグを次のように取得できます。

tabBody2=document.getElementsByTagName("TBODY").item(1);

一般的には、多くの当て推量と (おそらく) 切り貼りされたコードを使用しているようです。ID を試してみたがうまくいかなかったと言うのは、少しばかげています。TBODY タグであっても、要素の ID は正常に機能します。疑わしい場合は、最初に firebug または chromebug コンソールからそれらを呼び出してみて、最初に TBODY タグが機能するようにコード行を取得してから、それをコードに入れます。これを試してみてください: tbody を持つ 2 つのテーブルを html ページに入れます。「tbody1」や「tbody2」などの tbody タグ ID を指定してから、firebug コンソールを開いて次のように入力します。次に、tbody2 で同じことを試してください。

そして最後に、これは HTML5 ではありません。ただの古い退屈な HTML と Javascript です。これらのコマンドの詳細については、mozilla dev の DOM API レベル 2、HTML4 仕様、および Javascript リファレンスを参照してください。

于 2012-12-10T02:43:02.153 に答える