# data[].attributes.body
.capital{
text-transform:capitalize;
}

# data[].attributes.body
<!DOCTYPE html>

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<title></title>

</head>

<body>

<div>
<input id='x' type="text" name="name"><button id='a'>Submit</button>
<table id='c'>
</table>
</div>

<script type="text/javascript">

$('#a').on("click", function(){
var name = $('#x').val()

var z= name.split(" ")
var d= z[1].slice(0,1)+"."

$('#c').append('<tr><td>'+(z[0].substr(0,1).toUpperCase()+z[0].substr(1))+'</td><td>'+(d.substr(0,1).toUpperCase()+d.substr(1))+'</td></tr>')

$( "tr" ).children().last().mouseenter(
function() {
$(event.target).text(z[1].substr(0,1).toUpperCase()+z[1].substr(1))}
)
$( "tr" ).children().last().mouseleave(
function() {
$(event.target).text(d.substr(0,1).toUpperCase()+d.substr(1))}
)

})

</script>

</body>

</html>

# data[].attributes.body
.capital{
text-transform:capitalize;
}

# data[].attributes.body
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>

<form>
Name:<br>
<input type="text" name="firstname">
<button type="button">Submit</button>
</form>
<table id="nameTable">
<TR>
<TD>Jason</TD>
<TD>Bourne</TD>
</TR>
<TR>
<TD>Michael</TD>
<TD>Jordan</TD>
</TR>
<TR>
<TD>Peter</TD>
<TD>Parker</TD>
</TR>
</table>

<script>
$("button").click(function() {
var splitting = $('input').val().split(' ');
var firstName = splitting.shift();
var secondName = splitting.join();
var initial = secondName.substring(0, 1) + ".";

//            var lastC = $("table tr").children.last

$("#nameTable").append("<tr><td>" + firstName + "</td><td>" + initial + "<tr>")

$("tr").children().last().mouseenter(function(event){
$(event.target).text(secondName)
console.log(event.target)
})

$("tr").children().last().mouseout(function(event){
$(event.target).text(initial)
})

});
</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="Exercise3.css">
</head>

<body>

<div>
Name:<br>
<input type="text" name="firstname">
<button type="button">Submit</button>
</div>
<table id="nameTable">
<TR>
<TD class=capital>Jason</TD>
<TD class=capital>Bourne</TD>
</TR>
<TR>
<TD class=capital>Michael</TD>
<TD class=capital> Jordan</TD>
</TR>
<TR>
<TD class=capital>Peter</TD>
<TD class=capital>Parker</TD>
</TR>
</table>

<script>
$("button").click(function() {
var splitting = $('input').val().split(' ');
var firstName = splitting.shift();
var secondName = splitting.join();
var initial = secondName.substring(0, 1) + ".";

$("#nameTable").append("<tr><td>" + firstName + "</td><td>" + initial + "<tr>").addClass("capital")

$("tr").children().last().mouseenter(function(event){
$(event.target).addClass("capital").text(secondName)
console.log(event.target)
})

$("tr").children().last().mouseout(function(event){
$(event.target).addClass("capital").text(initial)
})

});
</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<title></title>

</head>

<body>

<div>

<input id='x' type="text" name="name"><button id='a'>Submit</button>

<table id='c'>

<tr>

<td>Jason</td>

<td>Bourne</td>

</tr>

<tr>

<td>Michael</td>

<td>Jordan</td>

</tr>

<tr>

<td>Peter</td>

<td>Parker</td>

<tr>

</table>

</div>

<script type="text/javascript">

$('#a').on("click", function(){

var name = $('#x').val()

var z= name.split(" ")

$('#c').append('<tr><td>'+z[0]+'</td><td>'+z[1]+'</td></tr>')

})
</script>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<title></title>

</head>

<body>

<div>

<input id='x' type="text" name="name"><button id='a'>Submit</button>

<table id='c'>

</table>

</div>

<script type="text/javascript">

$('#a').on("click", function(){

var name = $('#x').val()

var z= name.split(" ")

var d= z[1].slice(0,1)+"."

$('#c').append('<tr><td>'+z[0]+'</td><td>'+d+'</td></tr>')

$( "tr" ).children().last().mouseenter(

function() {

$(event.target).text(z[1])}

)

$( "tr" ).children().last().mouseleave(

function() {

$(event.target).text((z[1].slice(0,1)+"."))}

)

})

</script>

</body>

</html>