0

配列から動的テーブルを生成し、ユーザーがデータを編集できるようにするJavaScriptを開発しました。これは完璧に機能します。

今、同じ HTML ページでこのコードを 3 回使用したいと考えています。現時点では、ヘッダー形式を記述し、読み取り専用で 3 つの場合すべて同じであるメタデータと、テーブルのデータを実際に保持する「データ」の 2 つの変数に依存します。

インスタンスごとに 3 つのコードのコピーを用意するよりも、すべてを内部に保持し、単に 'setData' および 'getData' メソッドを持つオブジェクトを作成する方がよいと考えています。

既存のコードは onclick イベントを動的に作成します - グローバル関数ではなく、オブジェクト関数を参照するようにするにはどうすればよいですか? (つまり、現在、'RemoveRow(index)' のような関数があり、これは 'obj.RemoveRow(index)' になると思います。jquery でこれを実行したいのですが、残念ながら、渡す行インデックスがわかりません。おそらく、それを DOM 内のどこかに保存し、何らかの方法でアクセスして、クリックされている行を特定しますか?

配列への参照を渡すことは可能ですか? オブジェクトが渡された配列を操作できれば、作業するコピーを作成してから、呼び出し元がそれを独自の配列にコピーして戻すよりもはるかに優れています。

4

1 に答える 1

0

したがって、これは非常に生のコードであり、複数のオプションの 1 つにすぎませんが、次のようなアイデアが得られるかもしれません。

単一のテーブルを処理するオブジェクトを作成する

function TableControl () {
    // dom elements
    this.table = null;
    this.rows = null;
    // values
    this.id = null;
    // create new row
    this.insertRow = function() {
        // some logic
        this.table.append( 'new row goes here' );
    },
    // load table object and rows and stuff
    this._initiate = function() {
        //create object with all passed arguments
        var args = arguments[0] || {};

        // set internal values
        this.id = args.id;

        // get dom elements
        this.table = $('#' + this.id);
        this.rows = this.table.find('tr');
    },
    this._initiate( arguments[0] );
}

id各テーブルの を使用して、そのオブジェクトのインスタンスを作成します

var table_1 = new TableConrol({ id: 'table_1' });
var table_2 = new TableConrol({ id: 'table_2' });
var table_3 = new TableConrol({ id: 'table_3' });

したがって、各テーブルは、たとえば新しい行を追加するなど、独自の「スコープ」内のもののみを処理します。

table_1.insertRow();
于 2013-02-08T12:21:16.897 に答える