<tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        var anArray = [["A1","B1","C1"],
                     ["A2","B2","C2"],
                     ["A3","B3","C3"],
                     ["A4","B4","C4"],
                     ["A5","B5","C5"],
                     ["A1","B1","C1"],
                     ["A2","B2","C2"],
                     ["A3","B3","C3"],
                     ["A4","B4","C4"],
                     ["A5","B5","C5"]]; //last element of array was unclickable, I assumed that the last element of the array was null? what will I do to click the last element of array?

            var tables = document.getElementById("table");




       for(var i = 0; i < anArray.length; i++)
       {
           // create a new row
           var newRow = table.insertRow(tables.length);

            console.log(newRow);
           for(var j = 0; j < anArray[i].length; j++)
           {
               // create a new cell
                cell = newRow.insertCell(j);

               // add value to the cell
               cell.innerHTML = anArray[i][j];

            tables.rows[i].cells[j].onclick = function(){

            rIndex = this.parentElement.rowIndex+1;
                    cIndex = this.cellIndex;
                    console.log("Row : "+rIndex+" , Cell : "+cIndex);







                }

               }
           }

Saya melakukan semua yang saya bisa, saya ingin membuat daftar array multidimensi pada javascript dan mencetak output pada HTML pada saat yang sama, mengklik sel tabel dan saya melakukannya, tetapi ada masalah: elemen terakhir dari anArray ternyata nol karena tidak bisa diklik. Apa kesalahan yang telah aku perbuat? Ada saran?

0
Ghost 3 Mei 2020, 15:38

1 menjawab

Jawaban Terbaik

Masalahnya adalah tabel Anda memiliki baris tambahan di bagian atas, di sini:

<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
</tr>

Jadi ketika Anda mengakses tables.rows[i], Anda sebenarnya mengakses item anArray pada indeks i - 1.

Misalnya, saat i = 2, Anda menambahkan pendengar ke semua sel ["A2", "B2", "C2"] - baris kedua, bukan baris ketiga. Akibatnya, pada akhirnya, baris terakhir tidak mendapatkan pendengar yang terpasang.

Alih-alih mengakses baris yang baru dibuat dengan table.rows[i], pertimbangkan untuk mereferensikan baris yang dibuat dengan variabel newRow yang sudah ada dalam cakupan (dan nyatakan dengan const sehingga menjadi cakupan blok):

var anArray = [
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"],
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"]
]; //last element of array was unclickable, I assumed that the last element of the array was null? what will I do to click the last element of array?

var tables = document.getElementById("table");

for (let i = 0; i < anArray.length; i++) {
  // create a new row
  const newRow = table.insertRow(tables.length);
  for (let j = 0; j < anArray[i].length; j++) {
    // create a new cell
    cell = newRow.insertCell(j);
    // add value to the cell
    cell.innerHTML = anArray[i][j];
    newRow.cells[j].onclick = function() {
      rIndex = this.parentElement.rowIndex + 1;
      cIndex = this.cellIndex;
      console.log("Row : " + rIndex + " , Cell : " + cIndex);
    }
  }
}
<table id="table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
</table>

Atau, lebih ringkasnya, dengan forEach:

var anArray = [
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"],
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"]
]; //last element of array was unclickable, I assumed that the last element of the array was null? what will I do to click the last element of array?

const table = document.getElementById("table");
anArray.forEach((subarr, rowIndex) => {
  const tr = table.appendChild(document.createElement('tr'));
  subarr.forEach((content, cellIndex) => {
    const td = tr.appendChild(document.createElement('td'));
    td.textContent = content;
    td.onclick = () => console.log("Row : " + (rowIndex + 2) + " , Cell : " + (cellIndex + 2));
  });
});
<table id="table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
</table>
1
CertainPerformance 3 Mei 2020, 12:47