HTMLテーブルのクライアント側を生成する

Question

（ASP.NET Webアプリケーション）HTMLテーブルを作成できるページを作成したいと考えています。ユーザーは、テーブル内の行の量を定義するために使用されるテキストボックス、テーブル内の列の量を定義するために使用されるテキストボックス、および箇条書きのリスト（例えば、Square、Octagonなど）各セル内に表示されます）。

ユーザーが各コントロール内に値を入力するとき、私は既存の値に基づいてテーブルを構築して表示したいと思います。私はクライアント側でHTMLテーブルのコードの生成を処理したいと思います。

私のオプションは何ですか？私は便利だと信じているnumberofarticlesに出くわしましたが、私はすべてをまとめて、適切なアプローチをとることができません。私はクライアント側のスクリプティングに関する経験はほとんどありませんが、クリーンで効率的なソリューションが得られるなら、学習曲線（プログラマはどうでしょうか？）から恥ずかしがりません。

あなたが提供できる情報リンクは大変ありがとうございます。

Answer 1

いくつかのネストされたループを持つJQueryは、これをかなり簡単に実行する必要があります。文字列ビルダーなどで最適化できますが、基本的なことははっきりしています。あなたがより複雑な何かをやっている場合は、おそらくjQueryのか、MS AJAXのためのテンプレートエンジンのいずれかに探したほうが良いと思います：

<script type="text/javascript"> 
    $(function() { 
     $('INPUT, SELECT').change(function() { 
      var rows = parseInt($('#rows').get(0).value); 
      var cols = parseInt($('#cols').get(0).value); 
      if (isNaN(rows) || isNaN(cols)) { 
       return; 
      } 
      var shape = $('#shape').get(0).value; 
      drawTable(rows, cols, shape); 
     }); 
    }); 

    function drawTable(rows, cols, shape) { 
     $('#results').empty().append("<table></table>"); 
     var table = $('#results > TABLE'); 

     for (var row = 0; row < rows; row++) { 
      var htmlRow; 
      htmlRow = '<tr>'; 
      for (var col = 0; col < cols; col++) { 
       htmlRow += '<td><img src="' + shape + '.gif" alt="' + shape + '" /></td>'; 
      } 
      htmlRow += "</tr>"; 
      table.append(htmlRow); 
     } 
    }   
</script> 

Columns: <input id="cols" type="text" /> <br /> 
Rows: <input id="rows" type="text" /> <br /> 
Shape: 
    <select id="shape"> 
     <option value="square">Square</option> 
     <option value="circle">Circle</option> 
    </select> 

<div id="results"> 
</div> 

Answer 2

本当に具体的なことをしたいと思われるので、カスタムビルドを行う必要があります。私はJQuery（http://jquery.com/）を見て、それはホイールを再発明する時間を費やさずにカスタムjavascriptを書くための最良の方法の1つだと言いたいと思います。 Googleには多くの良いチュートリアルがあります。

編集：要素（テーブルの行を追加）とプロパティを設定する簡単な方法があります。これが必要な場合は、AJAX呼び出しを使用してすべてを保存することもできます。

あなたはあなたが本当にクライアント側でそれをしたい場合は、テーブルを構築するためにHTMLのDOMに対してプログラミングすることができ

Answer 3

に役立ちます願っています。テーブルオブジェクトを作成し、行と列を追加することはそれほど大きなものではありません。 forループのコントロール変数として、テキストボックスの値を使用します。使用するDOMオブジェクトについては、the W3Schools tutorialを参照してください。クライアントサイドのシェイプを追加するのは、td要素の中にイメージオブジェクト（またはimgタグ）を追加するだけで簡単です。

私は自分でやったわけではありませんが、何を記述しているかに基づいて、膨大な労力を費やすことなくクライアントサイドでJavaScriptで行うことができるように思えます。あなたが本当にクライアント上でそれを必要としない限り、私は間違いなくサーバー上でそれを行うことを検討するでしょう。

編集： 私はjQueryについてよく分かりません。そのライブラリで簡単に行うことができます。しかし、純粋なJSのやり方はあまりにも毛深いはずがありません。