Question

这是我的第一篇文章，所以仍在学习使用堆栈溢出，所以请善待哈哈。

以下脚本使用插入警报添加一行..（我知道很烦人）我试图让javascript启动一个事件处理程序，BOLD用户点击的单个单元格，之前从未使用过事件处理程序，我知道如何加粗它，但我只是加粗新添加的行...而不是单个单元格......任何建议都有帮助，我也希望这篇文章的格式化不会令人讨厌。

以下是内嵌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>

Answer 1

欢迎使用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的次数越多，你获得的就越好。

编辑：在点击次数上添加了粗体/非粗体。

<强> Updated DEMO

Answer 2

添加新单元格时，请为它们添加一个设置其样式的事件侦听器。

<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>

单击单元格粗体EventHandler

2 个答案: