Anonymous
Anonymous asked in Computers & InternetProgramming & Design · 7 years ago

Can someone figure out this code?

Directions

a) Add JavaScript to every data row of the table the following event handlers:

MoveValuesIn() activated by the onmouseover event;

RemoveValues() activated by the onmouseout event.

c) Implement the methods as follows:

- MoveValuesIn() copies values from the current row in the corresponding <input> elements FirstName and Lastname;

- RemoveValues() clears the FirstName and Lastname <input> elements.

d) Attach event handlers MakeBold() and RemoveBold() to the onmouseover and onmouseout events of each data cell in the table.

e) Implement handlers MakeBold() and RemoveBold() such that the cell over which the mouse currently is and the corresponding input control, and only these, are displayed in bold. All else is displayed in normal font.

<html>

<head>

<title>Untitled Page</title>

<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.0.0.542-30" ></script><script type="text/javascript">D2LMathML.DesktopInit('/d2l/common/mathjax/2.0.1/MathJax.js?config=MML_HTMLorMML&v=10.0.0.542-30','/d2l/common/mathjax/2.0.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML&v=10.0.0.542-30');</script></head>

<body>

<h1>The Seinfeld Family</h1>

<table id="Seinfeld Family" bgcolor=#66ffc border="1" style="width:533px;">

<tr bgcolor=#ff0000><th>First Name</th><th>Last Name</th></tr>

<tr><td>George</td><td>Constanza</td></tr>

<tr><td>Jerry</td><td>Seinfeld</td></tr>

<tr><td>Krammer</td><td>Cosmo</td></tr>

<tr><td>Elaine</td><td>Benice</td></tr>

<tr><td>Larry</td><td>King</td></tr>

<tr><td>Bill</td><td>O'Reilly</td></tr>

</table>

<div>

<label>First Name </label><input id="FirstName" name="FirstName" type="text" ><br>

<label>Last Name </label><input id="LastName" name="LastName" type="text" ><br>

</div>

<script type="text/javascript">

//insert here code to attach the MoveValuesIn() and RemoveValues() methods to each row

var table=document.getElementById("Seinfeld Family");

var tableRows=table.getElementsByTagName("TR");

//step a)

//step c)

//event handlers

function MoveValuesIn()

{

//alert("Move in...");

}

function RemoveValues()

{

//alert("Move out...");

}

//step d)

var tableCells=table.getElementsByTagName("TD");

//step e)

function MakeBold()

{

}

function RemoveBold()

{

}

</script>

</body>

</html>

1 Answer

Relevance
  • 7 years ago
    Best Answer

    Hi,

    on my computer the MoveValuesIn function is not working. As similar code runs on w3schools.com I think this might be related to my computer settings and sorry for this, so you don't have a complete solution; also the last three lines of the table need to be finalized, but you might find the way this code is set up helpful.

    All the best,

    Michael

    <html>

    <head>

    <script type = "style/text">

    </script>

    <script type="text/javascript">

    //insert here code to attach the MoveValuesIn() and RemoveValues() methods to each row

    var table=document.getElementById( "Seinfeld Family" );

    var tableRows=table.getElementsByTagName( "TR" );

    //step a)

    //step c)

    //event handlers

    function MoveValuesIn(el)

    {

    document.getElementById( "FirstName" ).value = el.cells[0].innerHTML;

    document.getElementById( "LastName" ).value = el.cells[1].innerHTML;

    }

    function RemoveValues()

    {

    document.getElementById( "FirstName" ).value = "XXX";

    document.getElementById( "LastName" ).value = "xxx";

    }

    //step d)

    var tableCells=table.getElementsByTagName("TR");

    //step e)

    function MakeBold(el)

    {

    el.style.fontWeight = 900;

    }

    function RemoveBold(el)

    {

    el.style.fontWeight = 100;

    }

    </script>

    <title>MoveIn/Remove values and Bold/Unbold rows</title>

    </head>

    <body>

    <h1>The Seinfeld Family</h1>

    <table id = "Seinfeld Family" bgcolor = #66ffc border = "1" style = "width:533px;">

    <trbgcolor=#ff0000><th>First Name</th><th>Last Name</th></tr>

    <tr onmouseover = "MoveValuesIn(this)"

    onmouseout = "RemoveValues()">

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    George

    </td>

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    Constanza

    </td>

    <tr onmouseover = "MoveValuesIn(this)"

    onmouseout = "RemoveValues()">

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    Jerry

    </td>

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    Seinefeld

    </td>

    </tr>

    <tr onmouseover = "MoveValuesIn(this)"

    onmouseout = "RemoveValues()">

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    Krammer

    </td>

    <td onmouseover = "MakeBold(this)"

    onmouseout = "RemoveBold(this)">

    Cosmo

    </td>

    </tr>

    <tr> <td> Elaine </td> <td> Benice </td></tr>

    <tr> <td> Larry </td> <td> King </td></tr>

    <tr> <td> Bill </td> <td> O'Reilly </td></tr>

    </table>

    <div>

    <label>First Name </label> <input id = "FirstName" name = "FirstName" type="text"> <br>

    <label>Last Name </label> <input id = "LastName" name = "LastName" type="text"> <br>

    </div>

    </body>

    </html>

Still have questions? Get your answers by asking now.