جافا سكريبت مجموعة معقدة "العنصر الحد" بناء جدول HTML استنادا إلى عناصر مجموعة

Question

لدي مشروع يتطلب التالية.

أربعة المصفوفات سيعلن في المدونة على هذا النحو:

var ROW1 = ['module1'];
var ROW2 = ['module2', 'module3'];
var ROW3 = ['module4', 'module5', 'module6'];
var ROW4 = ['module7', 'module8'];

كل عنصر من هذه المصفوفات يمثل وحدة في شكلي HTML القطعة.بناء على ما هي العناصر المحددة في كل مجموعة ، قانون بناء HTML الذي يمثل هذه "الوحدات" كل "ROWx" مجموعة سوف يكون صف الجدول () و كل وحدة سوف تكون خلية جدول () في الجدول.

ROW1 يمكن أن تكون فارغة (في هذه الحالة لن تكون مدرجة في HTML) أو وحدة نمطية واحدة "module1."

ROW2, ROW3 ، ROW4 يمكن لكل واحد بين 0 و 3 وحدات (أي من module2 - module8 في أي أمر).

باستخدام المثال المصفوفات أعلاه, كنت برمجيا إنشاء جدول HTML مثل هذا:

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module2]</td>
    <td colspan="3">[module3]</td>
  </tr>
  <tr id="row3">
    <td colspan="2">[module4]</td>
    <td colspan="2">[module5]</td>
    <td colspan="2">[module6]</td>
  </tr>
  <tr id="row4">
    <td colspan="3">[module7]</td>
    <td colspan="3">[module8]</td>
  </tr>
</table>

(إن colspans هناك فقط للحفاظ على الجدول الصحيح تخطيط ، 6 هو أدنى مشتركة متعددة بين 1 و 2 و 3.)

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

لقد قضيت الكثير من الوقت في إنشاء التعليمات البرمجية التي ملخصات وحدة خلق - يخلق "شل" تخطيط HTML على أساس عدد الوحدات الدراسية في كل صف ، ثم إلحاق المحتوى المناسب خلية الجدول التي على أساسها الوحدة يجب أن تكون هناك.أود أن تكون قادرة على الاستمرار في استخدام هذا الرمز ، لذلك أعتقد أن أفضل طريقة للقيام بذلك هو أن يذهب من خلال كل عنصر في المصفوفات قبل بناء "شل" و إذا لم يكن لديك محتوى إزالة هذا العنصر من مجموعة.ثم يمكنني استخدام المعدلة حديثا مجموعة لبناء "شل" في المعتاد - أنا في الأساس مجرد معالجة ذلك مسبقا للتحقق من المحتوى في كل وحدة ، و إذا لم يكن متوفرا ، يتصرف مثل تلك الوحدة لم يكن في الأولى مجموعة (قبل إزالته في مجموعة جديدة ومن ثم استخدام ذلك في بناء "شل" ).

على سبيل المثال, دعونا نقول تكوين إعداد هذا النحو:

var ROW1 = ['module1'];
var ROW2 = ['module4', 'module2'];
var ROW3 = ['module5'];
var ROW4 = ['module7', 'module3', 'module8'];

أريد أن تذهب من خلال كل عنصر في كل مجموعة و التحقق من المحتويات المتوفرة في وحدة نمطية.دعنا نقول أنه لا يوجد أي محتوى متوفر ل "module3" و "module5." أريد أن ثم في نهاية المطاف مع هذه المصفوفات:

var ROW1 = ['module1'];
var ROW2 = ['module4', 'module2'];
var ROW3 = ['module7', 'module8'];

يرجى ملاحظة ما حدث الصفوف - منذ "module5" تمت إزالة عناصر من ROW4 مجموعة كانت تحول إلى ROW3 ، ROW4 ثم حذف.أيضا في ROW3 (سابقا ROW4), "module3" تم إزالة انزلاق "module8" من موقف [2] في وضع [1].

لذلك:

• أي الصفوف التي تحتوي على واحد أو أكثر من العناصر المتبقية بعد إزالة الوحدات التي لا تحتوي على أي محتوى ، أود أن الحفاظ على الصف سليمة ، حتى مع وحدة واحدة.
• أي الصفوف التي في نهاية المطاف مع العناصر المتبقية ، أود أن تحول كل المتعاقبة الصف "حتى" واحد ، في السابق مجموعة أساسا سحب صف واحد وتحويل أقل منها.HTML من هذا المثال سوف تبدو مثل هذا:

قبل (حسب طلب التكوين):

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module4]</td>
    <td colspan="3">[module2]</td>
  </tr>
  <tr id="row3">
    <td colspan="6">[module5]</td>
  </tr>
  <tr id="row4">
    <td colspan="2">[module7]</td>
    <td colspan="2">[module3]</td>
    <td colspan="2">[module8]</td>
  </tr>
</table>

بعد (استنادا إلى المحتوى الذي هو في الواقع متاحة)

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module4]</td>
    <td colspan="3">[module2]</td>
  </tr>
  <tr id="row3">
    <td colspan="3">[module7]</td>
    <td colspan="3">[module8]</td>
  </tr>
</table>

يذكر أن ROW1 هو حالة خاصة في هذا فإنه لا يؤثر على الصفوف الأخرى.إذا كان المحتوى هو متاح من أجل "الوحدة النمطية 1" (وحدة الوحيدة التي يمكن أن تذهب في ROW1) ، ثم ROW1 يجب أن تكون موجودة يمسها.إذا كان أي محتوى متاح ، ثم ROW1 يمكن حذف, ولكن لا يزال يترك ROW2, ROW3 و ROW4 كما هو (أيلا نقل لهم كل صف).أنا فقط حقا بحاجة إلى حل للتعامل مع ROW2, ROW3 ، ROW4 ، لأن منطق ROW1 هو بسيط جدا.

أنا مبتدئ/متوسط جافا سكريبت مبرمج, و ليس لدي الكثير من الخبرة مع المصفوفات.لقد تم العمل على هذا من ساعات ولكن لا يشعرون بأن ما أنا قادمة مع قوية أو أنيقة/المدمجة الأسلوب.

إذا كان أي جافا سكريبت معلمو يمكن أن تشترك في حل لهذا, أنا اقدر ذلك كثيرا!شكرا جزيلا.

Answer 1

أولا وقبل كل شيء, تخزين الصفوف في مجموعة وكذلك ، ROW1 - ROW4 سوف تعطيك الصداع.

var ROWS = [
 ['module1'],
 ['module4', 'module2'],
 ['module5'],
 ['module7', 'module3', 'module8']
];

كنت أيضا أريد طريقة لإزالة عنصر. .splice() بنيت في المصفوفات, ويعمل على إزالة العناصر.

// lets clear out our disabled modules

var disabledModules = ['module3', 'module5'];

// quick sample function - yours might check for empty content or whatever else...
function isDisabled(module) {  
  for (var i=0, test; test=disabledModules[i]; i++) {
    if (test === module) return true;
  }
  return false;
}

for(var i=0,row; row=ROWS[i]; i++) {
  for (var j=0,module; module=row[j]; j++) {
    // is this module in our disabled modules list?

    if (isDisabled(module)) { // the module is disabled
      row.splice(j,1);
      j--; // so we recheck this point in the array
    }
  }
  if (row.length < 1) {
    // all items were deleted
    ROWS.splice(i,1);
    i--; // so we recheck this point..
  }
}

// ROWS === [["module1"], ["module4", "module2"], ["module7", "module8"]]

تعليقك سئل عن حلقة الجملة المستخدمة.إنه سريع جدا طريقة حلقة من خلال المصفوفات تعلم لن يكون "false" القيم.كسر واحد على حدة و تشغيل خاصية التسجيل المطول:

 for(
  // Part 1 of for loop: Setup, create two variables, i=0, and row.
  var i=0,row; 
  // Part 2: The test - when false, loop will exit, gets executed pre-loop every time
  // Assignment operator returns the value assigned, so row=ROWS[i] will be undefined
  // (false) when we reach then end of the array.
  row=ROWS[i]; 
  // Part 3: Post loop - increment i
  i++) {

مخاطر استخدام هذه الطريقة موجودة على الرغم من إذا كان صفيف من الأرقام على سبيل المثال, واحدة من تلك الأرقام 0 ، حلقة الخروج المبكر.وقد يكون البديل هو كتابة:

for(var i=0; i<ROWS.length; i++) { 
  var row = ROWS[i];
}