Javascript dapatkan baris tabel pertama

Question

element (index 0) in the table: .. .

item(index) Alert the innerHTML of the first

element (index 0) in the table: .. .

bernamaItem(id).

Ubah konten sel tabel pertama

Bagaimana cara mendapatkan data baris tabel dalam JavaScript onclick?

Anda bisa mendapatkan detail baris petak di dalam peristiwa klik dengan meneruskan elemen target ke metode "getRowInfo" komponen Petak .

Bagaimana cara mendapatkan baris terpilih dalam JavaScript?

Kotak Data JavaScript. Pemilihan Baris. Pilih satu baris dengan mengekliknya . Memilih satu baris akan menghapus pilihan sebelumnya kecuali Anda menahan Ctrl sambil mengklik. Memilih satu baris dan menahan Shift sambil mengklik baris kedua akan memilih rentang.

Dalam cuplikan ini, Anda dapat mengetahui cara memilih dan memberi gaya pada masing-masing kolom tabel Anda, terutama yang pertama dan terakhir di baris tabel. Untuk itu, Anda perlu menggunakan pseudo-class pemilih anak. . anak pertama dan. anak terakhir

Table of Contents Show

Tambahkan solusi Anda di sini
Pratinjau 0
Anggota yang Ada
atau Bergabunglah dengan kami
Bagaimana cara mendapatkan baris pertama dari sebuah tabel?
Bagaimana cara mendapatkan data baris tabel dalam JavaScript?
Bagaimana cara mendapatkan data baris tabel dalam JavaScript onclick?
Bagaimana cara mendapatkan baris terpilih dalam JavaScript?

Mari kita lihat bagaimana ini dilakukan. Pertama, buat HTML

Gunakan elemen dan atur lebarnya melalui atribut style
Tambah sebuah
Gunakan dua


  
    Month and Date
  
  
    January
    February
    March
    April
    May
  
  
    10.01.2020
    03.02.2020
    15.03.2020
    16.04.2020
    12.05.2020

Tetapkan batas untuk tag ,

table,
th,
td {
  border: 1px solid #666;
}

tr td:first-child,
tr td:last-child {
  color: #359900;
  font-weight: bold;
}

_

Sekarang, mari kita lihat kode lengkapnya



  
    Title of the document

, dan elemen

Tambahkan warna dan bobot font ke. anak pertama dan. anak terakhir dari

Hasil

Bulan dan TanggalJanuariFebruariMaretAprilMei10. 01. 202003. 02. 202015. 03. 202016. 04. 202012. 05. 2020

Diberikan tabel HTML dan tugasnya adalah mengakses elemen tabel dari Controller dan menyorot setiap baris yang kita inginkan

Mendekati. Kami akan menggunakan operasi DOM dasar dalam JavaScript untuk mengakses elemen baris tabel. Kami akan menambahkan kelas sorotan ke baris yang kami klik, jika kelas sorotan sudah ada maka kami akan menghapus kelas ini untuk menjadikannya normal

Tetapi ketika kita melakukan pemilih umum, kita akan menghindari konstruksi seperti aaname='*' karena ini tidak akan menambah nilai apa pun pada pemilih kita dan juga dapat dihilangkan

dalam beberapa kasus yang jarang terjadi, kami juga dapat bekerja dengan idx='1' tetapi kemudian Anda dapat melakukan pemeriksaan silang untuk efek samping, jadi lebih baik tidak menggunakan jika Anda kurang berpengalaman dengan penyeleksi

Mungkin Anda dapat membagikan beberapa tangkapan layar dari struktur elemen (mis. g. Browser F12 Webtools) sehingga kami dapat memeriksa detail lebih lanjut tentang strategi pemilih seperti tabel/baris pertama/td pertama/a …

Saya memiliki tabel yang dibuat secara dinamis yang memuat lebih banyak elemen dengan klik tombol. Apa yang saya juga coba lakukan adalah kapan saja di mana saja di tabel itu ketika sebuah baris diklik tidak peduli baris apa yang mendapatkan nilai di sel pertama dari baris itu yang diklik. Saya terus mendapatkan nilai pertama dari sel pertama baris pertama dengan kode saya

Ini javascriptnya

Ini tabelnya

Masalahnya adalah, Anda meminta jQuery untuk menemukan td pertama di tabel. Anda harus menanyakannya untuk td pertama berturut-turut

Sesuatu seperti ini seharusnya berhasil

$(".browseTable").on("click", "td", function(){
    var ptsID = $(this).parent("tr").find("td:first").text();
    alert(ptsID);
});

_
https. //jsfiddle. net/9pbmb1tj/[^]

Tambahkan solusi Anda di sini

B I U S small BIG code var < > & link [^] encode untab case indent outdent

Pratinjau 0

Anggota yang Ada

atau Bergabunglah dengan kami

Unduh, Pilih, Komentari, Publikasikan

Email mu

Email ini sedang digunakan. Apakah Anda memerlukan kata sandi Anda?

Kata Sandi Opsional

Mohon saat menjawab pertanyaan

Baca pertanyaan dengan hati-hati
Pahami bahwa bahasa Inggris bukanlah bahasa utama semua orang, jadi toleran terhadap ejaan dan tata bahasa yang buruk
Jika pertanyaan diutarakan dengan buruk, mintalah klarifikasi, abaikan, atau edit pertanyaan dan perbaiki masalahnya. Penghinaan tidak diterima
Jangan beritahu seseorang untuk membaca manual. Kemungkinan mereka memiliki dan tidak mendapatkannya. Berikan jawaban atau lanjutkan ke pertanyaan berikutnya

Mari bekerja untuk membantu pengembang, bukan membuat mereka merasa bodoh

Konten ini, bersama dengan kode sumber dan file terkait, dilisensikan di bawah The Code Project Open License (CPOL)

Artikel ini adalah ikhtisar dari beberapa metode dasar DOM level 1 yang kuat dan cara menggunakannya dari JavaScript. Anda akan mempelajari cara membuat, mengakses dan mengontrol, serta menghapus elemen HTML secara dinamis. Metode DOM yang disajikan di sini tidak khusus untuk HTML; . Demonstrasi yang disediakan di sini akan berfungsi dengan baik di semua browser modern

Catatan. Metode DOM yang disajikan di sini adalah bagian dari spesifikasi level 1 Document Object Model (Core). DOM level 1 mencakup kedua metode untuk akses dan manipulasi dokumen umum (DOM 1 Core) serta metode khusus untuk dokumen HTML (DOM 1 HTML)

Dalam contoh ini kami menambahkan tabel baru ke halaman saat tombol diklik

HTML

<input type="button" value="Generate a table" onclick="generateTable()" />

JavaScript

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

Hasil

Perhatikan urutan di mana kami membuat elemen dan simpul teks

Pertama kita membuat elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_3

Selanjutnya, kita membuat elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_4, yang merupakan turunan dari elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3

Selanjutnya, kami menggunakan loop untuk membuat elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

6, yang merupakan anak dari elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

4

Untuk setiap elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_6, kami menggunakan loop untuk membuat elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

9, yang merupakan turunan dari elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

6

Untuk setiap elemen
```
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
```
_9, kami kemudian membuat simpul teks dengan teks sel tabel

Setelah kita membuat elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3,

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

4,

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

6, dan

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

9, dan kemudian simpul teks, kita kemudian menambahkan setiap objek ke induknya dalam urutan yang berlawanan

Pertama, kami melampirkan setiap simpul teks ke elemen induknya

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

9 menggunakan

cell.appendChild(cellText);

Selanjutnya, kami melampirkan setiap elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

9 ke elemen induknya

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

6 menggunakan

row.appendChild(cell);

Selanjutnya, kami melampirkan setiap elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_6 ke elemen induk

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

4 menggunakan

tblBody.appendChild(row);

Selanjutnya, kami melampirkan elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

4 ke elemen induknya

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3 menggunakan

tbl.appendChild(tblBody);

Selanjutnya, kami melampirkan elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3 ke elemen induknya

row.appendChild(cell);

4 menggunakan

document.body.appendChild(tbl);

Ingat teknik ini. Anda akan sering menggunakannya dalam pemrograman untuk DOM W3C. Pertama, Anda membuat elemen dari atas ke bawah;

Inilah markup HTML yang dihasilkan oleh kode JavaScript

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

Inilah pohon objek DOM yang dihasilkan oleh kode untuk elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3 dan elemen turunannya

Anda dapat membuat tabel ini dan elemen turunan internalnya hanya dengan menggunakan beberapa metode DOM. Ingatlah untuk selalu mengingat model pohon untuk struktur yang akan Anda buat; . Dalam pohon

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_3 Gambar 1 elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

3 memiliki satu anak. elemen

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_4.

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

4 memiliki dua anak. Setiap anak

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_4 (

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

6) memiliki dua anak (

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

9). Akhirnya, setiap

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

_9 memiliki satu anak. simpul teks

Dalam contoh ini kami mengubah warna latar belakang paragraf saat tombol diklik

HTML

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

JavaScript

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_0

Hasil

tblBody.appendChild(row);

4 adalah metode yang tersedia di setiap DOM

tblBody.appendChild(row);

5 atau root

tblBody.appendChild(row);

6 elemen. Saat dipanggil, ia mengembalikan larik dengan semua turunan elemen yang cocok dengan nama tag. Elemen pertama dari daftar terletak di posisi

tblBody.appendChild(row);

7 dalam larik

Kami telah melakukan langkah-langkah berikut

Pertama, kita mendapatkan semua

tblBody.appendChild(row);

_8 elemen dalam dokumen

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_1

Kemudian kita mendapatkan elemen paragraf kedua dari daftar

tblBody.appendChild(row);

8 elemen

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_2

Terakhir, kita atur warna latar menjadi merah menggunakan properti

tbl.appendChild(tblBody);

0 dari objek

tbl.appendChild(tblBody);

1

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_3

Gunakan objek dokumen untuk memanggil metode

tbl.appendChild(tblBody);

2 dan buat node teks Anda. Anda hanya perlu melewati konten teks. Nilai yang dikembalikan adalah objek yang mewakili simpul teks

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_4

Ini berarti Anda telah membuat simpul dengan tipe

tbl.appendChild(tblBody);

3 (sepotong teks) yang data teksnya adalah

tbl.appendChild(tblBody);

4, dan

tbl.appendChild(tblBody);

5 adalah referensi Anda ke objek simpul ini. Untuk menyisipkan teks ini ke halaman HTML Anda, Anda perlu membuat simpul teks ini sebagai anak dari beberapa elemen simpul lainnya

Jadi, dengan memanggil

tbl.appendChild(tblBody);

_6, Anda menjadikan elemen sebagai anak baru dari elemen

tbl.appendChild(tblBody);

7 kedua

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_5

Setelah menguji sampel ini, perhatikan bahwa kata halo dan dunia digabungkan. Halo Dunia. Jadi secara visual, ketika Anda melihat halaman HTML sepertinya dua node teks hello dan world adalah satu node, tetapi ingat bahwa dalam model dokumen, ada dua node. Simpul kedua adalah simpul baru bertipe

tbl.appendChild(tblBody);

3, dan merupakan turunan kedua dari tag

tbl.appendChild(tblBody);

7 kedua. Gambar berikut menunjukkan objek Text Node yang baru saja dibuat di dalam pohon dokumen

Catatan.

document.body.appendChild(tbl);

0 dan

document.body.appendChild(tbl);

1 adalah cara sederhana untuk memasukkan spasi putih antara kata halo dan dunia. Catatan penting lainnya adalah bahwa metode

document.body.appendChild(tbl);

2 akan menambahkan anak setelah anak terakhir, sama seperti kata dunia ditambahkan setelah kata halo. Jadi jika Anda ingin menambahkan Text Node antara hello dan world, Anda harus menggunakan

document.body.appendChild(tbl);

3 alih-alih

document.body.appendChild(tbl);

2

Anda dapat membuat elemen HTML baru atau elemen lain yang Anda inginkan dengan

document.body.appendChild(tbl);

5. Misalnya, jika Anda ingin membuat elemen

tbl.appendChild(tblBody);

7 baru sebagai anak dari elemen

row.appendChild(cell);

4, Anda dapat menggunakan

document.body.appendChild(tbl);

8 pada contoh sebelumnya dan menambahkan simpul elemen baru. Untuk membuat panggilan simpul

document.body.appendChild(tbl);

_9. Sebagai contoh

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_6

Node dapat dihapus. Kode berikut menghapus simpul teks

tbl.appendChild(tblBody);

_5 (berisi kata "dunia") dari elemen

tbl.appendChild(tblBody);

7 kedua,

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

2

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_7

Simpul teks

tbl.appendChild(tblBody);

5 (mengandung kata "dunia") masih ada. Kode berikut melampirkan

tbl.appendChild(tblBody);

_5 ke elemen

tbl.appendChild(tblBody);

7 yang baru dibuat,

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

6

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_8

Keadaan akhir untuk pohon objek yang dimodifikasi terlihat seperti ini

Untuk sisa artikel ini kami akan terus bekerja dengan sample1. html. Gambar berikut menunjukkan struktur pohon objek tabel untuk tabel yang dibuat dalam sampel

Langkah-langkah dasar untuk membuat tabel di sample1. html adalah

Dapatkan objek tubuh (item pertama dari objek dokumen)
Buat semua elemen
Terakhir, tambahkan setiap anak sesuai dengan struktur tabel (seperti pada gambar di atas). Kode sumber berikut adalah versi yang dikomentari untuk sample1. html

Catatan. Di akhir fungsi

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

_7, ada baris kode baru. Properti

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

8 tabel disetel menggunakan metode DOM lain,

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

9.

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

_9 memiliki dua argumen. nama atribut dan nilai atribut. Anda dapat mengatur atribut apa pun dari elemen apa pun menggunakan metode

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

1

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

_9

Contoh ini memperkenalkan dua atribut DOM baru. Pertama menggunakan atribut

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

_2 untuk mendapatkan daftar simpul anak myCell. Daftar

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

_2 mencakup semua simpul anak, apa pun nama atau jenisnya. Seperti

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

_4, mengembalikan daftar node

Perbedaannya adalah (a)

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

4 hanya mengembalikan elemen dari nama tag yang ditentukan;

Setelah Anda memiliki daftar yang dikembalikan, gunakan metode

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

7 untuk mengambil item anak yang diinginkan. Contoh ini menyimpan di myCellText simpul teks dari sel kedua di baris kedua tabel

Kemudian, untuk menampilkan hasil dalam contoh ini, ia membuat simpul teks baru yang isinya adalah data

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

8, dan menambahkannya sebagai turunan dari elemen

row.appendChild(cell);

4

Catatan. Jika objek Anda adalah simpul teks, Anda dapat menggunakan atribut data dan mengambil konten teks dari simpul tersebut

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

0

Di akhir sample1 ada panggilan ke

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

1 pada objek

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

01. Panggilan ini digunakan untuk menyetel properti batas tabel. Untuk mengambil nilai atribut, gunakan metode

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

02

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

1

Setelah Anda memiliki objek dalam variabel JavaScript, Anda dapat menyetel properti

tbl.appendChild(tblBody);

0 secara langsung. Kode berikut adalah versi sample1 yang dimodifikasi. html di mana setiap sel dari kolom kedua disembunyikan dan setiap sel dari kolom pertama diubah menjadi latar belakang merah. Perhatikan bahwa properti