3

少し説明が長くなるかもしれませんが、ご容赦ください。

X 個のテーブルを作成しようとしています。それぞれの長さ (列) Y が異なり、それぞれ 4 行あり、X と Y はユーザーによって決定されます。この部分は私が解決しました。

問題は、すべてのテーブルのすべてのセルに、データベースから得られた数値を含む独自のテキスト ボックスを含める必要があることです。ユーザーがテキスト ボックスの数値を変更した場合、その変更をデータベースに反映する必要があります。

テーブルの数とテーブルの長さが不明であるため、事前にテキスト ボックスの名前を設定することはできず、動的に設定する必要があります。

私はこのコードに出くわしました:

var pageNumber = 1;
eval("var text" + pageNumber + "=123;");
alert(text1);
//alert shows '123'

これにより (変更を加えると)、各テキスト ボックスに一意の名前を動的に作成できるようになると思います。私が問題を抱えているのは、(テーブルが作成された後) 何と呼ばれているのかわからないため、この新しいテキスト ボックスにどのようにアクセスするかということです。

テーブルの各セルに表示する数値を保持するために 3D 配列を使用する予定であり、この配列を使用してセルに名前を付ける予定です。

例として、配列は array[i][j][k] で、i=1、j=2、k=3 とすると、8 が保持されます。動的に作成されるテキスト ボックスの名前は次のようになります。 : textBox123

配列内のそのセル (8 を含む) をその新しいテキスト ボックスに関連付け、その名前が事前にわからない場合に新しい値を取得して保存するにはどうすればよいですか?

私がそれを考えている方法、どのように私は次のようなものを書きますか

 <input type="text" name="textBox123" value=array[i][j][k]>

htmlに？

もう一度言いますが、私はこれを考えすぎており、もっと良い方法があるのか​​もしれません。もしそうなら、私に知らせてください。

4

4 に答える 4

1

必要に応じて DOM 階層に基づいて計算できるため、テーブル内のすべてのセルにインデックスを事前にタグ付けする必要はありません。

テーブルに任意のセルがある場合、テーブル内のそのセルの行番号と列番号を次のように取得できます。cellこの関数に渡されるのは、オブジェクトtdまたはその子孫のいずれかです (<input>テーブル）：

// Pass any td object or descendant of a td object in a <table> and it will return
// an object with {row: x, col: y}
// or return null if the cell passed wasn't inside a <tr> and <td>
function findRowColInTable(cell) {

    function findParent(obj, parentTagName) {
        parentTagName = parentTagName.toUpperCase();
        while (obj && obj.tagName != parentTagName) {
            obj = obj.parentNode;
        }
        return obj;
    }

    findChildCnt(obj) {
        var cnt = 0;
        while (obj = obj.prevSibling) {
            ++cnt;
        }
        return cnt;
    }

    var td, tr, col, row;

    // get table cell
    td = findParent(cell, "TD");
    if (td) {
        col = findChildCnt(td);
        tr = findParent(td, "TR");
        if (tr) {
            row = findChildCnt(tr);
            return {row: row, col: col};
        }
    }
    return null;
}

.closest(tag)参考までに、これは jQuery を使用して適切な親を見つけ、ローカルの兄弟数を取得するのにかなり簡単ですが.index()、純粋な JavaScript バージョンを提供しました。

于 2013-10-27T02:04:49.317 に答える
1

HTML:

<div id="tables"></div>

JavaScript:

var tables = [
        // Table #1
        [
            [111, 112, 113], // Row #1
            [121, 122, 123]  // Row #2
        ],
        // Table #2
        [
            [211, 212, 213, 214], // Row #1
            [221, 222, 223, 224], // Row #2
            [231, 232, 233, 234]  // Row #3
        ],
        // Table #3 (empty!)
        []
    ],
    nr, nc, i, j, k,
    name, value, textBox, cell, row, table,
    $tables = $("#tables");

for (i = 0; i < tables.length; ++i) {
    nr = tables[i].length;
    nc = nr > 0 ? tables[i][0].length : 0;
    table = "<table>";
    for (j = 0; j < nr; ++j) {
        row = "<tr>";
        for (k = 0; k < nc; ++k) {
            name = "textBox" + (i + 1) + (j + 1) + (k + 1);
            value = tables[i][j][k];
            textBox = "<input type='text' name='" + name + "' value='" + value + "'>";
            cell = "<td>" + textBox + "</td>";
            row += cell;
        }
        row += "</tr>\n";
        table += row;
    }
    table += "</table>\n";
    $tables.append(table);
}

jsfiddleを参照してください。3 番目の空のテーブルは空のtableタグとして挿入されますが、これは必須ではありません。

これらのテーブルをデータベースに接続する必要があるため、Backbone.jsなどのクライアント側の MVC フレームワークを使用するのが洗練されたソリューションです。ここに良い入門書があります。ビューは、上記のようなコードをテーブルに使用できます。配列はCollectionに格納できます。rendertables

于 2013-10-27T02:28:50.423 に答える
0

実際にフォーム上で配列を実行できます。私の古い答えを例にとると、そのような命名スキームを使用してフォーム入力に配列を作成できます。バックエンドでは、それらを配列として取得します (PHP を想定)。

代わりに JS を介して値を取得する場合は、この回答に基づいて、命名スキームを利用し、フォームの値を取得して、PHP がバックエンドで受け取る方法と同様に、フォームの値を取得して JS オブジェクトと配列に変換できます。 . 基本的に、フォームを実行してフォームの値を取得します。一部は jQuery ですが、ライブラリ全体を組み込みたくない場合は、jQuery からソースを取得できます。

于 2013-10-27T02:04:48.067 に答える
0

JavaScriptオブジェクト指向の概念を利用できます

各テーブルには対応するテーブル オブジェクトがあり、行とセルも同様です。この手法では、すべてのオブジェクトが実際の DOM に「要素」を持ちます。

秘訣は、イベントリスナーをオブジェクトにアタッチすることです（たとえば、ユーザーがテキストボックスに何かを入力したとき）、そのイベントリスナーがその特定のセルにのみ対応し、他の列、行、およびテーブルの他のセルを台無しにしないようにします。

ここに可能な解決策があります。jQuery に大きく依存して申し訳ありません。document.createElement() で要素を作成する方法がわかりません（私の悪い知識です）。もちろん、純粋なjavascript実装（jQueryなし）でそれらを変更できます。

     values=new Array();
     function Cell(id,values_row){ //Cell class
        this.id=id;
        this.element=$("<td></td>");           
        this.textbox=$("<input type='text' name='"+this.id+"' id='"+this.id+"'></input>");
        values_row[id]="" //initiate default value == ""
            //here is the trick
        this.textbox.change(function(){ //you can use onchange if you dont like jQuery
            values_row[id]=$(this).val();             
            //other tasks need to be done when user changes the value of a textbox (typing)
        });
        this.textbox.appendTo(this.element);    
    }
    function Row(id,number_of_columns,values_table){ //Row class
        this.id=id
        this.element=$("<tr></tr>")                
        values_table[id]=new Array(); //make array "values" becomes 3D              
        for(var col =0;col<number_of_columns;col++){
            var the_cell=new Cell(col,values_table[col]);
            the_cell.element.appendTo(this.element);
        }
    }
    function Table(id,number_of_columns){ //Table class
        this.id=id
        this.element=$("<table></table>")
        values[id]=new Array();  //make array "values" becomes 2D                     
        for(var row=0;row<4;row++){
            var the_row=new Row(row,number_of_columns,values[id]);
            the_row.element.appendTo(this.element)                       
        }
    }
    // creating the tables
    for(var t=0;t<number_of_tables_needed;t++){
        the_table=new Table(t,number_of_column_for_this_table);
        the_table.element.appendTo(table_container_element);
    }
    //do input some text into some cells then
    alert(values)

アラートは、テーブル番号、行番号、およびセルを正確に指す列によってインデックス付けされたすべてのセルの値を含む 3D 配列を表示します。セルの値のデフォルト値は "" です

この手法を使用すると、値が入力されたばかりの対応するセルの正しい配列要素を見つける必要はありません。代わりに、DOM で要素を作成する前にイベント リスナーをアタッチします。これは、問題に対するオブジェクト指向の方法/アプローチです。

ユーザーが入力するたびに対応する配列セルを見つける必要がある場合に O(n^3) アルゴリズムの複雑さを持たせるのではなく、このソリューションはオブジェクトの初期化中に少し時間がかかりますが、その後は O(1) になります。

于 2013-10-27T02:26:58.617 に答える