Question

我仅使用javascript和DOM属性创建一个表，有没有一种方法可以更改我的代码以使用循环来执行相同的操作，因为正如您在代码中所看到的那样，它实际上是相同的3时间，只是添加了不同的元素？

// Body element
var docNavigate = document.body; 

docNavigate.appendChild(tableElem);     // Adds the table element

docNavigate = docNavigate.lastChild;    // Moves to the table element
docNavigate.appendChild(trElem1);       // Adds the tr element
docNavigate = docNavigate.firstChild;   // Moves the tr element
docNavigate.appendChild(tdElem1);       // Adds the first td element in the heading
docNavigate.appendChild(tdElem2);       // Adds the second td element in the heading
docNavigate.appendChild(tdElem3);       // Adds the third td element in the heading
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeA1);    // Adds the first textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeA2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeA3);    // Adds the third textNode
docNavigate = docNavigate.parentNode;   // Moves back to the tr element
docNavigate = docNavigate.parentNode;   // Moves back to the table element

docNavigate.appendChild(trElem2);       // Adds the second tr element
docNavigate = docNavigate.lastChild;    // Moves to the second tr element
docNavigate.appendChild(tdElem4);       // Adds the td element
docNavigate.appendChild(tdElem5);       // Adds the td element
docNavigate.appendChild(tdElem6);       // Adds the td element
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeB1);    // Adds the frist textNode
docNavigate = docNavigate.nextSibling;  // Moves to te next td element
docNavigate.appendChild(textNodeB2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeB3);    // Adds the thrid textNode
docNavigate.parentNode;                 // Moves to the tr element
docNavigate.parentNode;                 // Moves to the table element

docNavigate.appendChild(trElem3);       // Adds the tr element
docNavigate = docNavigate.lastChild;    // Moves to the tr element
docNavigate.appendChild(tdElem7);       // Adds the td element
docNavigate.appendChild(tdElem8);       // Adds the td element
docNavigate.appendChild(tdElem9);       // Adds the td element
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeC1);    // Adds the first textNode
docNavigate = docNavigate.nextSibling;  // Moves to the td element
docNavigate.appendChild(textNodeC2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeC3);    // Adds the third textNode
docNavigate.parentNode;                 // Moves to the tr element
docNavigate.parentNode;                 // Moves to the table element

Answer 1

从innerHTML到功能完善的模板，共有100种方法可以实现。这是最简单的选项之一：

function tag(name, ...children) {
    let t = document.createElement(name);
    for (let c of children)
        t.appendChild(c);
    return t;
}

function text(content) {
    return document.createTextNode(content);
}

//

document.body.appendChild(tag('table',
    tag('tr',
        tag('td', text('cell 1')),
        tag('td', text('cell 2')),
        tag('td', text('cell 3')),
    ),
    tag('tr',
        tag('td', text('cell 4')),
        tag('td', text('cell 5')),
        tag('td', text('cell 6')),
    )
))

通常，由于HTML是嵌套结构，因此循环（“平”）不是正确的选择。嵌套函数效果最好。

Answer 2

或递归循环

const table = {
  tag: "table",
  children: [
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "A1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "A2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "A3"
            }
          ]
        }
      ]
    },
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "B1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "B2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "B3"
            }
          ]
        }
      ]
    },
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "C1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "C2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "C3"
            }
          ]
        }
      ]
    }
  ]
};

function render(root, data) {
  const recurse = (parent, d) => {
    let current;
    if (d.tag) {
      current = parent.appendChild(document.createElement(d.tag));
    } else if (d.text) {
      current = parent.appendChild(document.createTextNode(d.text));
    }
    if (d.children && d.children.length) {
      d.children.forEach(child => recurse(current, child));
    }
  };
  recurse(root, data);
}

render(document.body, table);

如何重做此代码以创建表，但使用循环？

2 个答案: