0

これは私の最初の投稿であり、スタック オーバーフローの使い方をまだ学習中です。

次のスクリプトは、挿入アラートを使用して行を追加します..(私は迷惑なことを知っています)私は、ユーザーがクリックした個々のセルを太字にするために、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>

4

2 に答える 2

0

StackOverflow へようこそ。

クリック時にセルのテキストを太字にするには、次の 3 つのイベント リスナーを追加し、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 を練習して学べば学ぶほど、上達します。

編集:クリック時に太字/太字を追加しました。

更新されたデモ

于 2014-09-25T06:43:53.947 に答える