mchayapol · September 7, 2015 03:52
diff --git a/index.html b/index.html
 <!DCOTYPE html>
 <head>
    <title>Contacts</title>
 <script src="js/contact.js"></script>
 <script src="js/jquery-1.11.3.min.js"></script>

 <script>

    function restoreUI() {
        var divList = document.getElementById('divList');
        divList.style.display = "block";
        var divDetails = document.getElementById('divDetails');
        divDetails.style.marginLeft = "420px";
    }

    var currentContact;
 var c1 = new Contact('Chayapol','Moemeng','0899999999');
 var c2 = new Contact('Prateep', 'D.', '088888888');
 var c3 = new Contact('Jump', 'S.', '087777777');
 c1.picture = 'avatar.png';
 c2.picture = 'avatar.png';
 c3.picture = 'avatar.png';

 var list = [];  // create an array / list
 list[0] = c1;
 list[1] = c2;
 list[2] = c3;

 console.log(c1.fullname());
 c1.sayHello();
 c1.sayHi();

        $(document).ready(function () {
            // Populate list into table
            console.log(list.length);
            var tabList = document.getElementById('tabList');
            //var tabList = $('#tabList');

            for (var i in list) {
                //var r = tabList.insertRow(tabList.rows.length);


                // refer to the new row recently created
                $('#tabList tr:last').after('<tr></tr>');
                $('#tabList tr:last').click(function () {
                    $('#divList').css(
                        { 'display' : 'none' }
                    );
                    $('#divDetails').css({ 'margin-left' : '0px'});

                    console.log('clicked ' + i);
                    currentContact = list[this.rowIndex];
                    $('#spanFullname').html(list[this.rowIndex].fullname());
                    $('#spanPhone').html(list[this.rowIndex].phone);
                    $('#spanEmail').html(list[this.rowIndex].email);
                });

                $('#tabList tr:last')
                    .html("<td><img src='" + list[i].picture + "' class='avatar'></td>");

 /*
                c0 = r.insertCell(0);
                c1 = r.insertCell(1);
                c0.innerHTML = "<img src='" + list[i].picture + "' class='avatar'>";
                c1.innerHTML = "<span class='fullname'>" + list[i].fullname() + "</span><br>" +
                               "<span class='phone'>" + list[i].phone + "</span>";
 */
            }

        });


    </script>
 <style>
 #divList, #divDetails {
 	border: 1px solid black;
 	width: 400px;
 	height: 600px;
 }

 #divList {
 	float: left;
 }

 #divDetails {
 	margin-left: 410px;
    z-index: 999;
 }

    .avatar {
        border: 1px solid red;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .fullname {
        font: bold 24px arial;
    }

    .phone {
        font: normal 18px arial;
    }
 </style>
 </head>
 <html>
 <body>
    <div id="divList">
        <h1>List</h1>
        <table id="tabList">
        </table>
        <span id="spanList">

        </span>
    </div>

    <div id="divDetails">
        <button onclick="restoreUI()" id="btnBack"><img width="32px" src="back.jpg" /></button>
        <h1><span id="spanFullname"></span></h1>
        Phone: <span id="spanPhone"></span><br />
        Email: <span id="spanEmail"></span>
        <span id="spanDetails">
        </span>
    </div>

 </body>

 </html>
	<!DCOTYPE html>
	<head>
	<title>Contacts</title>
	<script src="js/contact.js"></script>
	<script src="js/jquery-1.11.3.min.js"></script>

	<script>

	function restoreUI() {
	var divList = document.getElementById('divList');
	divList.style.display = "block";
	var divDetails = document.getElementById('divDetails');
	divDetails.style.marginLeft = "420px";
	}

	var currentContact;
	var c1 = new Contact('Chayapol','Moemeng','0899999999');
	var c2 = new Contact('Prateep', 'D.', '088888888');
	var c3 = new Contact('Jump', 'S.', '087777777');
	c1.picture = 'avatar.png';
	c2.picture = 'avatar.png';
	c3.picture = 'avatar.png';

	var list = []; // create an array / list
	list[0] = c1;
	list[1] = c2;
	list[2] = c3;

	console.log(c1.fullname());
	c1.sayHello();
	c1.sayHi();

	$(document).ready(function () {
	// Populate list into table
	console.log(list.length);
	var tabList = document.getElementById('tabList');
	//var tabList = $('#tabList');

	for (var i in list) {
	//var r = tabList.insertRow(tabList.rows.length);


	// refer to the new row recently created
	$('#tabList tr:last').after('<tr></tr>');
	$('#tabList tr:last').click(function () {
	$('#divList').css(
	{ 'display' : 'none' }
	);
	$('#divDetails').css({ 'margin-left' : '0px'});

	console.log('clicked ' + i);
	currentContact = list[this.rowIndex];
	$('#spanFullname').html(list[this.rowIndex].fullname());
	$('#spanPhone').html(list[this.rowIndex].phone);
	$('#spanEmail').html(list[this.rowIndex].email);
	});

	$('#tabList tr:last')
	.html("<td><img src='" + list[i].picture + "' class='avatar'></td>");

	/*
	c0 = r.insertCell(0);
	c1 = r.insertCell(1);
	c0.innerHTML = "<img src='" + list[i].picture + "' class='avatar'>";
	c1.innerHTML = "<span class='fullname'>" + list[i].fullname() + "</span><br>" +
	"<span class='phone'>" + list[i].phone + "</span>";
	*/
	}

	});


	</script>
	<style>
	#divList, #divDetails {
	border: 1px solid black;
	width: 400px;
	height: 600px;
	}

	#divList {
	float: left;
	}

	#divDetails {
	margin-left: 410px;
	z-index: 999;
	}

	.avatar {
	border: 1px solid red;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	}

	.fullname {
	font: bold 24px arial;
	}

	.phone {
	font: normal 18px arial;
	}
	</style>
	</head>
	<html>
	<body>
	<div id="divList">
	<h1>List</h1>
	<table id="tabList">
	</table>
	<span id="spanList">

	</span>
	</div>

	<div id="divDetails">
	<button onclick="restoreUI()" id="btnBack"><img width="32px" src="back.jpg" /></button>
	<h1><span id="spanFullname"></span></h1>
	Phone: <span id="spanPhone"></span><br />
	Email: <span id="spanEmail"></span>
	<span id="spanDetails">
	</span>
	</div>

	</body>

	</html>