をHTMLのテーブルにクライアント側

StackOverflow https://stackoverflow.com/questions/795075

質問

(ASP.NET Webアプリケーション）きたらと思いるページを作成するときにユーザーをドキュメントを編集するには、表に示す。のユーザーに提供する以下のコントロール:るテキストボックスを定義するのに使用量の行のテーブル、テキストボックスを定義するために使用される金額のカラムのテーブルには、箇条書きの形状ます。スクエア、八角形など)を表示しております。

として、ユーザの入力値内の各コントロールで、そういった構築および表示のテーブルの既存の値です。私の発生はテーブルHTMLのコードのクライアント側です。

うっす。私ア 番号 の 記事 と思によるものであるが、私はできない作品も収集対象アプローチ私は経験の少ないクライアント側のスクリプティングした短期学習曲線（プログラマは?) ばすことで、クリーンで効率的な解決策です。

任意情報のリンクを提供する事ができれぞよろしくお願い申し上げます。

役に立ちましたか？

解決

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>

他のヒント

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

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

それが役立つことを願っています

クライアント側で本当にやりたい場合は、HTML DOMに対してプログラムしてテーブルを構築できます。テーブルオブジェクトを作成し、行と列を追加することは、それほど大したことではないはずです。テキストボックスの値は、ループの制御変数として使用します。見る W3Schoolsチュートリアル DOMオブジェクトを使用するため。シェイプを追加するクライアント側は、TD要素内に画像オブジェクト（またはIMGタグ）を追加するのと同じくらい簡単です。

私はそれを自分でやっていませんが、あなたが説明していることに基づいて、それは大量の努力なしでクライアント側のJavaScriptでできることのように聞こえます。とはいえ、クライアントで本当に必要な場合を除き、サーバーでそれを行うことを間違いなく検討します。

編集：ところで、私はjqueryについてあまり知りません。そのライブラリでそれを行う簡単な方法があるかもしれません。しかし、純粋なJSウェイはあまり毛深いものであってはなりません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top