[英]on click Cell bold EventHandler
这是我的第一篇文章，因此仍在学习如何使用堆栈溢出，所以请客气。
以下脚本使用插入警报添加了一行。.（我知道这很烦人）我试图让javascript启动事件处理程序，以粗体显示用户单击的单个单元格，以前从未使用过事件处理程序，我知道如何将其加粗，但是我只需将新添加的行加粗..而不是单个单元格......对此的任何建议都将有所帮助，我也希望本帖子的格式不会令人讨厌。
以下是带有嵌入式javascript的代码。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Address Book</title> <style type="text/css"> .ab { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #993300; background-color: #CCFFCC; padding: 5px; height: 100px; width: 350px; border: thin dotted #993300; } </style> <script type="text/javascript"> function addressBookItem (fname, lname, email) { this.fname= fname; this.lname = lname; this.email = email; } addressBookItem.prototype.write = function() { var adrbook = "<tr><td>"+this.fname+"</td><td>"+this.lname+"</td><td>"+this.email+"</td></tr>"; document.write(adrbook); } function appendRow(){ var fname = prompt("Please enter your first name"); var lname = prompt("Please enter your last name"); var email = prompt("Please enter your email"); var table = document.getElementById("nameT"); // Create an empty <tr> element and add it to the 1st position of the table: var row = table.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // Add some text to the new cells: cell1.innerHTML = fname; cell2.innerHTML = lname; cell3.innerHTML = email; //row.style.color="red"; cell.onclick = function () { alert(this.innerHTML); }; } function yourFunction(){ alert("test"); } </script> </head> <body> <table border="1" id="nameT"> <tr> <th>Name</th> <th>Last Name</th> <th>Email</th> </tr> <script type="text/javascript"> var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com'); var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net'); aB1.write(); aB2.write(); </script> </table> <button onclick="appendRow()">new</button> </body> </html>
欢迎使用StackOverflow，
您只需要将这三个事件侦听器添加到事件中，然后将其innerHTML设置为粗体，就可以使单元格的文本变为粗体：
cell1.onclick = function () {
if(this.innerHTML[0] !== "<")
this.innerHTML = "<b>"+this.innerHTML+"</b>";
else
this.innerHTML = this.innerHTML.substr(3,this.innerHTML.length-3);
};
cell2.onclick = function () {
if(this.innerHTML[0] !== "<")
this.innerHTML = "<b>"+this.innerHTML+"</b>";
else
this.innerHTML = this.innerHTML.substr(3,this.innerHTML.length-3);
};
cell3.onclick = function () {
if(this.innerHTML[0] !== "<")
this.innerHTML = "<b>"+this.innerHTML+"</b>";
else
this.innerHTML = this.innerHTML.substr(3,this.innerHTML.length-3);
};
请记住，可以有更有效的方法来做到这一点，但是为了简单起见和初学者的理解，您应该非常容易地做到这一点。 您练习和学习Javascript / HTML / CSS的次数越多，您就会获得更好的效果。
编辑：点击增加了黑体/黑体。
添加新单元格时，向它们添加事件侦听器以设置其样式。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Address Book</title> <style type="text/css"> .ab { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #993300; background-color: #CCFFCC; padding: 5px; height: 100px; width: 350px; border: thin dotted #993300; } </style> <script type="text/javascript"> function addressBookItem (fname, lname, email) { this.fname= fname; this.lname = lname; this.email = email; } addressBookItem.prototype.write = function() { var adrbook = "<tr><td>"+this.fname+"</td><td>"+this.lname+"</td><td>"+this.email+"</td></tr>"; document.write(adrbook); } function appendRow(){ var fname = prompt("Please enter your first name"); var lname = prompt("Please enter your last name"); var email = prompt("Please enter your email"); var table = document.getElementById("nameT"); // Create an empty <tr> element and add it to the 1st position of the table: var row = table.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // Add some text to the new cells: cell1.innerHTML = fname; cell2.innerHTML = lname; cell3.innerHTML = email; var cells = [cell1, cell2, cell3]; for (var i = 0; i < cells.length; i++) { cells[i].addEventListener("click", function() { if (this.style.fontWeight == "bold") { this.style.fontWeight = "normal"; } else { this.style.fontWeight = "bold"; } }); } } function yourFunction(){ alert("test"); } </script> </head> <body> <table border="1" id="nameT"> <tr> <th>Name</th> <th>Last Name</th> <th>Email</th> </tr> <script type="text/javascript"> var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com'); var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net'); aB1.write(); aB2.write(); </script> </table> <button onclick="appendRow()">new</button> </body> </html>
单击Handsontable中的contextMenu“ Bold”时，如何允许所选单元格文本为粗体
[英]How can i allow selected cell text to be bold when click contextMenu 'Bold' in Handsontable
所有 object 方法中的 1 个方法不适用于 eventHandler 鼠标单击
[英]1 of the all object methods not working with eventHandler mouse click
Chrome：eventHandler（'click'，function）不适用于复选框
[英]Chrome: eventHandler('click', function) doesnt work for checkboxes
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.