From 6cfeca62b338f0525062d7acd4db0cdceca1ca08 Mon Sep 17 00:00:00 2001
From: JavaSDragon <33486797+JavaSDragon@users.noreply.github.com>
Date: Tue, 23 Jan 2018 17:43:18 +0300
Subject: [PATCH] Task1
Third way on jQuery.
---
event.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 7 +++++
tableTask.html | 26 ++++++++++++++++
3 files changed, 113 insertions(+)
create mode 100644 event.js
create mode 100644 style.css
create mode 100644 tableTask.html
diff --git a/event.js b/event.js
new file mode 100644
index 0000000..6a1fd50
--- /dev/null
+++ b/event.js
@@ -0,0 +1,80 @@
+//var table = document.getElementById("table");
+
+ /*var handleMouseOver = function(event) {
+ var target = event.target;
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ target.style.backgroundColor = 'red';
+ const {width, height} = getComputedStyle(target);
+ target.innerHTML = `width: ${width} height: ${height}`;
+ return;
+ }
+ target = target.parentNode;
+ }
+}
+var handleMouseOut = function(event) {
+ var target = event.target;
+
+ // цикл двигается вверх от target к родителям до table
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ // нашли элемент, который нас интересует!
+ target.style.backgroundColor = '';
+ target.innerHTML ='';
+ return;
+ }
+ target = target.parentNode;
+ }
+}
+table.addEventListener("mouseover", handleMouseOver);
+table.addEventListener("mouseout", handleMouseOut);*/
+
+/*table.onmouseover = function(event) {
+ var target = event.target;
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ target.style.backgroundColor = 'red';
+ const {width, height} = getComputedStyle(target);
+ target.innerHTML = `width: ${width} height: ${height}`;
+ return;
+ }
+ target = target.parentNode;
+ }
+}
+
+table.onmouseout = function(event) {
+ var target = event.target;
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ target.style.backgroundColor = '';
+ target.innerHTML ='';
+ return;
+ }
+ target = target.parentNode;
+ }
+}*/
+
+ $( "#table" ).mouseover(function() {
+ var target = event.target;
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ target.style.backgroundColor = 'red';
+ const {width, height} = getComputedStyle(target);
+ target.innerHTML = `width: ${width} height: ${height}`;
+ return;
+ }
+ target = target.parentNode;
+ }
+});
+
+ $( "#table" ).mouseout(function() {
+ var target = event.target;
+ while (target != table) {
+ if (target.tagName == 'TD') {
+ target.style.backgroundColor = '';
+ target.innerHTML ='';
+ return;
+ }
+ target = target.parentNode;
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c675fa4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,7 @@
+td
+{
+ min-width:143px;
+ max-width:143px;
+ min-height:143px;
+ max-height:143px;
+}
\ No newline at end of file
diff --git a/tableTask.html b/tableTask.html
new file mode 100644
index 0000000..ef0b35a
--- /dev/null
+++ b/tableTask.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Table
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
\ No newline at end of file