onclick 在 table 行 [javascript] 中不起作用

Question

我是新来的javascript
在此代码中，我将 json 数据打印到 table 中，但不是整个数据 bookName。所以我的问题是，当我尝试点击书名时，例如 The Night Fire、Murder、The Death Higgler 等。它不起作用

所以我不知道这样写 onclick 是对还是错，因为我是 javascript 的新手，可能这就是为什么我点击该列的数据但我希望它是可点击的

任何帮助将不胜感激

let bookDetails = [
    {
        bookId: "1",
        bookName: "The Night Fire",
        bookDescription: "description the night fire",
        bookAuthor: "Arnold Bennett ",
        bookPages: "10",
        category: "horror",
        price: "120",
        year: "2001"
    },
    {
        bookId: "2",
        bookName: "Murder",
        bookDescription: "description Murder",
        bookAuthor: "Arnold Bennett ",
        bookPages: "110",
        category: "Mystery",
        price: "130",
        year: "2019"
    },
    {
        bookId: "3",
        bookName: "The Death Higgler",
        bookDescription: "description the Higgler",
        bookAuthor: "Coppard",
        bookPages: "80",
        category: "horror",
        price: "140",
        year: "2020"
    },
    {
        bookId: "4",
        bookName: "The Open Boat",
        bookDescription: "description The Open Boat",
        bookAuthor: "Stephen",
        bookPages: "30",
        category: "Fantasy",
        price: "200",
        year: "2018"
    }]


function toShowTable(bookDetails) {
    messageTable(" ");
    let table = "<table border = 1 cellpadding = 10 ><th colspan=3 >Book Names</th>"
    for (key in bookDetails) {
        table += "<tr><td>" + bookDetails[key].bookName + "</td>";
        bookDetails[key].bookName.onclick = function () {
            console.log("hii");
        }
    } messageTable(table);
}
function messageTable(variable) {
    document.getElementById("messageTable").innerHTML = variable;
}

<!DOCTYPE html>
<html>

<head>
    <title>Book Store information C</title>
    <script src="add.js"></script>
    <style>
        th,
        td,
        p,
        input {
            font-family: Arial, Helvetica, sans-serif;
        }

        table,
        th,
        td {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 10px 10px;
            text-align: center;
        }

        th {
            font-weight: bold;
        }
    </style>
</head>
<body>
<input type="button" value="showTable" onclick="toShowTable(bookDetails)">
<p id="messageTable"></p>
</body>
</html>

Answer 1

你可以这样做



function toShowTable(bookDetails) {
    messageTable(" ");
    let table = "<table border = 1 cellpadding = 10 ><th colspan=3 >Book Names</th>"
    for (key in bookDetails) {
        table += "<tr onclick='yourFunction(somevalue)'><td>" + bookDetails[key].bookName + "</td>";
    }
    messageTable(table);
}

function yourFunction(value) {
    // do someting
}

Answer 2

你能试试这个吗？您不需要 messageTable 函数

function toShowTable(bookDetails) {
  const messageTable=document.getElementById("messageTable");
  messageTable.innerHTML = '';
    let table=document.createElement("table");
    bookDetails.forEach((item)=>{
      let row= table.insertRow(-1);
        let cell=row.insertCell(0);
        cell.innerHTML=item.bookName;
        cell.addEventListener('click',()=>{
          alert(item.bookName);
        })
    })
    messageTable.appendChild(table);
}

onclick 在 table 行 [javascript] 中不起作用

onclick is not working in the table row [javascript]

javascript

json

onclick