Javascript系列复杂"的元素减少"建设一个HTML表基于元件阵列

Question

我有一个项目，需要以下。

四阵列将被宣布在代码作为这样的：

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

每个元素的这些阵列代表一个模块中的配置HTML部件。根据什么因素是规定在每个阵列，代码将建立一个HTML，表示这些"模块"-每个"ROWx"阵将是一个表行(),并且每个模块将是一个表格()表中。

ROW1可以是空的(在这种情况下，它不会被包括在HTML)或者具有一个模块"模块1."

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中。)

问题是，内容为这些模块是动态填充的(我得到它从阿贾克斯叫到一个网址，返回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是非常简单的。

我是初级/中级JavaScript程序员，并没有很多的经验阵列。我已经在这方面的工作和关闭的时间，但只是不觉得我的未来是一个强大或优雅/紧凑的方法。

如果任何JavaScript大师可以分享一个解决方案，我非常感谢！谢谢束。

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"]]

你的意见，要求有关用于环语法使用。它是一种非常快速的方式，通过循环阵你知道不会有"虚假"的价值观。打破一个分开，并把详细记录：

 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];
}