Add event handler to each Dynamic insertRow to bold and unbold

Question

gahhon 13 Junior Poster

7 Years Ago

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Address Book</title> <script type="text/javascript">
        function addressBookItem (fname, lname, email) {
            this.fname = fname;
            this.lname = lname; 
            this.email = email;
        }

        addressBookItem.prototype.write = function() {
            adrbook = "<tr><td>" + this.fname + "</td><td>" + this.lname + "</td><td>" + this.email + "</td></tr>";         

            document.write(adrbook);
        }

        function appendRow() {
            // Prompt user for their informations
            var fname = prompt("Please Enter Your First Name", "");
            var lname = prompt("Please Enter Your Last Name", "");
            var email = prompt("Please Enter Your Email Address", "");

            // Get table ID
            var table = document.getElementById("tbladr");

            if (fname != null && lname != null && email != null) {  
                // Insert a new row at the end of table.
                var row = table.insertRow(-1);

                var col1 = row.insertCell(0);

                col1.addEventListener("click", addBold, false);

                var col2 = row.insertCell(1);
                var col3 = row.insertCell(2);

                // Change the font color.
                col1.style.color = "green";
                col2.style.color = "green";
                col3.style.color = "green";

                col1.addEventListener("onclick", addBold);

                // Insert information to each column
                col1.innerHTML = fname;
                col2.innerHTML = lname;
                col3.innerHTML = email;
            }
        }

        function addBold() {
            // Trying to change the font weight to bold on this cell only.
            alert("BOLD");
        }

    </script> </head> <body> <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');

        document.write("<table border='1' id='tbladr'>");   
        document.write("<th>First Name</th><th>Last Name</th><th>Email Address</th>");

        aB1.write();
        aB2.write();

        document.write("</table>");

    </script> <br /> <input id="append" type="submit" value="Append New Row" onclick="appendRow(); " /> </body> </html>

When the end-user click on certain new added cell, it the word will become bold.
If click again, the word will unbold.
Any idea how to do it? Because I did a lot of research on net, also try on this program. It is still no working.
Thanks for the advanced information.

javascript

1 Contributor
2 Replies
595 Views
1 Hour Discussion Span
Latest Post 7 Years Ago Latest Post by gahhon

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gahhon 13 Junior Poster · Answer 1 · 2017-03-19T16:30:59+00:00

        function appendRow() {
            // Prompt user for their informations
            var fname = prompt("Please Enter Your First Name", "");
            var lname = prompt("Please Enter Your Last Name", "");
            var email = prompt("Please Enter Your Email Address", "");

            // Get table ID
            var table = document.getElementById("tbladr");

            if (fname != null && lname != null && email != null) {  
                // Insert a new row at the end of table.
                var row = table.insertRow(-1);              

                var cell = row.insertCell(0);
                cell.innerHTML = fname;
                cell.style.color = "green";
                cell.onlick = function() {addBold();}

                cell = row.insertCell(1);
                cell.innerHTML = lname;
                cell.style.color = "green";
                //cell.onclick = addBold();

                cell = row.insertCell(2);
                cell = innerHTML = email;
                cell.style.color = "green"; 
                //cell.onclick = addBold();
            }
        }

        function addBold() {
            // Trying to change the font weight to bold on this cell only.
            alert("BOLD");
        }

Actually I have tried a lot source, but it is still not working.

gahhon 13 Junior Poster · Answer 2 · 2017-03-19T17:00:49+00:00

function appendRow() {
            // Prompt user for their informations
            var fname = prompt("Please Enter Your First Name", "");
            var lname = prompt("Please Enter Your Last Name", "");
            var email = prompt("Please Enter Your Email Address", "");

            // Get table ID
            var table = document.getElementById("tbladr");

            if (fname != null && lname != null && email != null) {  
                // Insert a new row at the end of table.
                var row = table.insertRow(-1);

                var cell = row.insertCell(0);
                cell.style.color = "green";
                cell.innerHTML = fname;
                cell.onclick = function () { addBold(this); };

                var cell = row.insertCell(1);
                cell.style.color = "green";
                cell.innerHTML = lname;
                cell.onclick = function () { addBold(this); };

                var cell = row.insertCell(2);
                cell.style.color = "green";
                cell.innerHTML = email;
                cell.onclick = function () { addBold(this); };
            }
        }

        function addBold(tableCell) {
            if (tableCell.style.fontWeight == "bold")
                tableCell.style.fontWeight = "normal";
            else
                tableCell.style.fontWeight = "bold";

        }

Everything is work fine and i found my mistake is that I forgot to put ; to close the statement.