1

.txt

Скачиваний:

Добавлен:

12.11.2022

Размер:

7 Кб

Скачать

☆

<html>
<head>
<script>
var sa = 5;
var gacchi =5;
window.onload = function() {
myButton.onclick = onClick;
heading = document.createElement("h2");
heading_text = document.createTextNode("Other information");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}

function onClick() {
alert('Click!')
}

function addH3() {
heading = document.createElement("h3");
heading_text = document.createTextNode("One more information");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}

function addBorders() {
var table = document.getElementById("myTable");
table.border = "1px solid";
}

function showElementAttrs(outputId) {
let elementId = document.getElementById("userElementId").value;
var elementAttrs = document.getElementById(elementId).attributes;
for (var i = 0; i < elementAttrs.length; i++) {
document.getElementById(outputId).innerHTML += elementAttrs[i].nodeName.toLowerCase() +": " + elementAttrs[i].value +"<br>";
}
}

function recolorOddTR() {
var table = document.getElementById("myTable");
var rows = table.querySelectorAll('tr');
for (var i = 0; i < rows.length; i+=2) {
rows[i].style.backgroundColor="green";
}
}

function recolorEvenTR() {
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName('tr');
for (var i = 1; i < rows.length; i+=2) {
rows[i].style.backgroundColor="blue";
}
}

function recolorFirstColumn() {
document.getElementById("myTable").rows[0].cells[0].style.backgroundColor="orange";
document.getElementById("myTable").rows[1].cells[0].style.backgroundColor="orange";
document.getElementById("myTable").rows[2].cells[0].style.backgroundColor="orange";
document.getElementById("myTable").rows[3].cells[0].style.backgroundColor="orange";
}

function resetCellsColor() {
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++)
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].style.backgroundColor="white";
}
}

function addTableRow() {
var table = document.getElementById("myTable");
row = document.createElement("tr");
col1 = document.createElement("td");
col2 = document.createElement("td");
col3 = document.createElement("td");
col4 = document.createElement("td");

col1.appendChild(document.createTextNode("5"));
col2.appendChild(document.createTextNode("5"));
col3.appendChild(document.createTextNode("5"));
col4.appendChild(document.createTextNode("5"));
cum +=1;
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);

table.appendChild(row);
}

function addTableColumn() {
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
col = document.createElement("td");
col_text = document.createTextNode(i+1);
col.appendChild(col_text);
table.rows[i].appendChild(col);
}
}
function Ex1() {
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName('td');
for (var i = 1; i < rows.length; i+=2) {
rows[i].style.backgroundColor="red";
}
}
function Ex2(){
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName('td');
for (var i = 0; i < rows.length; i+=2) {
rows[i].style.backgroundColor="orange";
}
}
function Ex3(){
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++)
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].style.backgroundColor="white";
}
}
function generateColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16)
}
function Ex4(){
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName('td');
for (var i = 0; i < rows.length; i+=1) {
rows[i].style.backgroundColor = generateColor();
}
}
function Ex5(){
var table = document.getElementById("myTable");
row = document.createElement("tr");
col1 = document.createElement("td");
col2 = document.createElement("td");
col3 = document.createElement("td");
col4 = document.createElement("td");

col1.appendChild(document.createTextNode(sa));
col2.appendChild(document.createTextNode(sa));
col3.appendChild(document.createTextNode(sa));
col4.appendChild(document.createTextNode(sa));
sa +=1;
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);

table.appendChild(row);
}
function Ex6(){
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
col = document.createElement("td");
col_text = document.createTextNode(i+1);
col.appendChild(col_text);
table.rows[i].appendChild(col);
}
}
table.onmouseover = function(event) {
let target = event.target;
target.style.background = 'pink';
text.value += "mouseover " + target.tagName + "\n";
text.scrollTop = text.scrollHeight;
};

table.onmouseout = function(event) {
let target = event.target;
target.style.background = '';
text.value += "mouseout " + target.tagName + "\n";
text.scrollTop = text.scrollHeight;
};

</script>
<title>My title
</title>
</head>
<body>
<h1>Some information</h1>
<div id="output">
</div>
<table border=0 id="myTable">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>

<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
<input value="Push me" onclick="onClick()" type="button">
<input value="Click me" type="button" id="myButton">
<input value="Add h3" type="button" onclick="addH3()">
<input value="Add table borders" type="button" onclick="addBorders()">
<input value="Recolor odd table rows" type="button" onclick="recolorOddTR()">
<input value="Recolor even table rows" type="button" onclick="recolorEvenTR()">
<input value="Recolor first table column (bad way)" type="button" onclick="recolorFirstColumn()">
<input value="Reset table cells color" type="button" onclick="resetCellsColor()">
<input value="Add row to table" type="button" onclick="addTableRow()">
<input value="Add column to table" type="button" onclick="addTableColumn()">
<input value="№1" type="button" onclick="Ex1()">
<input value="№2" type="button" onclick="Ex2()">
<input value="№3" type="button" onclick="Ex3()">
<input value="№4" type="button" onclick="Ex4()">
<input value="№5" type="button" onclick="Ex5()">
<input value="№6" type="button" onclick="Ex6()">
<br>
<input type="text" id="userElementId" placeholder="Element id"></input>
<button onclick="showElementAttrs('output')">Try it</button>
</body>
</html>

Соседние файлы в предмете Программирование на HTML/CSS/JavaScript (Веб-разработка)

#
12.11.20227 Кб71.txt
#
12.11.20223 Кб82.txt
#
12.11.2022461 б93.txt
#
12.11.2022983 б10style.css
#
12.11.2022980 б5style_in.txt