Saya membuat tabel hanya menggunakan javascript dan properti DOM, apakah ada cara saya dapat mengubah kode saya untuk menggunakan loop untuk melakukan hal yang sama karena, seperti yang Anda lihat dalam kode, itu benar-benar hal yang sama 3 kali, hanya elemen yang berbeda ditambahkan?

// 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
1
Austinwc0402 29 Oktober 2019, 01:33

2 jawaban

Jawaban Terbaik

Ada 100-an cara untuk melakukannya, dari innerHTML hingga template lengkap. Inilah salah satu opsi paling sederhana:

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')),
    )
))

Umumnya, karena HTML adalah struktur bersarang, loop (yang "datar") bukanlah pilihan yang tepat. Fungsi bersarang bekerja paling baik.

3
georg 28 Oktober 2019, 22:45

Atau loop rekursif

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);
1
William Lohan 28 Oktober 2019, 22:59