إنشاء جانب عميل طاولة HTML

Question

(تطبيق ASP.NET Web) أود إنشاء صفحة تتيح للمستخدم إنشاء جدول HTML. سيتم تزويد المستخدم بالتحكم عناصر التحكم التالية: مربع نص يستخدم لتحديد مقدار الصفوف في الجدول، مربع نص المستخدم لتحديد مقدار الأعمدة في الجدول، وقائمة نقطية للأشكال (EX. Square، المثمن، إلخ ) والتي سيتم عرضها داخل كل خلية.

نظرا لأن المستخدم يدخل قيمة داخل كل عنصر تحكم، أود إنشاء وعرض الجدول بناء على القيم الموجودة. أود التعامل مع توليد رمز جدول HTML على جانب العميل.

ما هي خياراتي؟ لقد صادفت رقم من مقالات وأعتقد أنني قد تكون مفيدة، لكنني غير قادر على قطع كل شيء معا وجمع نهج قابل للتطبيق؛ لدي القليل من الخبرة في البرمجة النصية من جانب العميل، ومع ذلك لن أخطئ من منحنى التعلم (ما مبرمجها؟) إذا كان ذلك سيؤدي إلى حل نظيف وفعال.

أي روابط إعلامية يمكنك تقديمها موضع تقدير كبير.

Answer 1

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/) إنها واحدة من أفضل الطرق لكتابة جافا سكريبت مخصص دون الحاجة إلى قضاء ساعات إعادة اختراع العجلة. هناك الكثير من البرامج التعليمية الجيدة على Google.

تحرير: هناك طريقة بسيطة لإضافة عناصر (صفوف الجداول لحالتك) وتعيين خصائصها. يمكنك أيضا استخدام مكالمات AJAX لحفظ كل ما إذا كان هناك حاجة إلى ذلك.

امل ان يساعد

Answer 3

يمكنك برنامج مقابل HTML DOM لإنشاء الجدول إذا كنت تريد حقا القيام بذلك على جانب العميل. لا ينبغي أن يكون إنشاء كائن جدول وإضافة صفوف وأعمدة هذا الكبير من الصفقة. ستستخدم قيم مربعات النص كمتغيرات التحكم في الحلقات الخاصة بك. يرى البرنامج التعليمي W3Schools. لكائنات DOM للاستخدام. يجب أن تكون إضافة جانب العميل الأشكال بسيطة مثل إضافة كائنات صورة (أو علامات img) داخل عناصر TD.

لم أفعل ذلك بنفسي، ولكن بناء على ما تصفه أنه يبدو وكأنه شيء يمكن القيام به في جافا سكريبت على جانب العميل دون قدر كبير من الجهد. ومع ذلك، سأرى بالتأكيد القيام بذلك على الخادم إلا إذا كنت بحاجة حقا إلى العميل.

يحرر:راجع للشغل، أنا لا أعرف الكثير عن مسج. قد تكون هناك طريقة أبسط للقيام بذلك مع تلك المكتبة. لكن طريقة JS النقية لا ينبغي أن تكون شعرية للغاية.