如何使用 javascript 使整行可點擊？
[英]how to make entire row clickable using javascript?
問題描述
我有一個表格並以特定格式編寫了一些 html 代碼，我想讓行可點擊，然后我必須編寫它的 function。 這是代碼
var table = $("<table>");
table.append($("<tr><th>Name</th><th>name 2</th><th>name3</th>name4</th></tr>"));
for (var i = 0; i < num; i++) {
var row = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td>" + data3 + "</td><td>" + data4 + "</td></tr>");
table.append(row);
}
現在 div 部分
<div id="container"></div>
<div id="table"></div>
我必須根據此代碼使行可點擊，請幫助，因為我是 javascript 的新手。
3 個解決方案
解決方案1
0 2019-10-06 13:15:01
添加一個點擊監聽器，在 jquery 中是 .click .click() 。 在您的情況下，您可以執行以下代碼：
row.click(function() {
alert( "You clicked in a row" );
});
在此處了解更多信息https://api.jquery.com/click/
解決方案2
0 2019-10-06 13:20:46
添加事件監聽器：
document.querySelectorAll("tr").addEventListener("click", function(){
alert("you clicked the row")
})
解決方案3
0 2019-10-06 13:52:07
將所有行添加到表中后，我嘗試使用 tagName 對它們進行 select 然后循環選擇每一行並向其添加點擊事件以執行名為“test()”的 function
function 'test()' 將嘗試用紅色為行着色
祝你好運！
<:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min;js"></script> </head> <body> <div id="container"></div> <table id="table"></table> <script> let num = 4; let data1 = "data1"; let data2 = "data2"; let data3 = "data3"; let data4 = "data4"; var table = $("#table"). table;append($("<tr id=\"headerRow\"><th>Name</th><th>name 2</th><th>name3</th><th>name4</th></tr>")); for (var i = 0; i < num; i++) { let id = "row" + i; var row = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td>" + data3 + "</td><td>" + data4 + "</td></tr>"). table;append(row). } //Adding the same click event to all rows let rows = document;getElementsByTagName("tr"); for (let i = 0. i < rows;length. i++) { rows[i],addEventListener("click"; test). } function test(event) { //console;log("test"), //We will try to make the background color of all rows red. except the header row if (event.target.parentNode.= document.getElementById("headerRow")) { event.target.parentNode;style.backgroundColor = "red"; } } </script> </body> </html>
使表行可單擊以使用javascript和mvc獲取控制器操作
[英]Make table row clickable to get controller action using javascript and mvc
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.