adrian/webServerTest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table and dom test

Browse Source
This commit is contained in:
adrian
2025-08-21 20:29:06 +02:00
parent eb5e7de4e5
commit 11dfa373f1
4 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1 +1 @@
node_modules/
/node_modules

38
index.html
View File

@ -5,24 +5,30 @@
<link rel="stylesheet" href ="style.css">
<meta charset="UTF-8"/>
<meta name="viewport" content = "width=device.width, initial-scale=1.0"/>
<script src="main.js"></script>
<script src="main.js" defer></script>
<title>javascript test</title>
</head>
<body>
<p class="center">webside test mit node backend</p>
<button class="center" onclick="press()">Drück mich</button>
<button class="center" onclick="redBg()">hintergrund rot(dom)</button>
<table>
<tr>
<th scope="col">test1col</th>
<th scope="col">test2col</th>
<th scope="col">test3col</th>
</tr>
<tr>
<th scope="row">testrow</th>
<td>7</td>
<td>bla</td>
</tr>
</table>
<div class="head-col">
<p class="center">webside test mit node backend</p>
</div>
<button class="center" onclick="press()">Drück mich</button>
<button class="center" onclick="redBg()">hintergrund rot(dom)</button>
<div class="adding">
<input id="inputText" type="text">
<button id="addButton">hinzufügen</button>
</div>
<div class="inputTable">
<table id="contentTable">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">text</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>

21
main.js
View File

@ -15,3 +15,24 @@ function redBg() {
isRed = false;
}
}
const addButton = document.getElementById('addButton');
addButton.addEventListener('click', handleInput);
let i = 0;
function handleInput() {
const inputText = document.getElementById('inputText').value;
/*alert(inputText);*/
const table = document.getElementById('contentTable');
const newRow = table.insertRow();
i++;
newRow.insertCell(0).textContent = i;
newRow.insertCell(1).textContent = inputText;
};

16
style.css
View File

@ -6,3 +6,19 @@ button.center {
display: block;
margin: 0 auto;
}
.head-col {
background-color: gray;
}
.adding {
display: flex;
justify-content: center;
gap 10px;
}
.inputTable {
display: flex;
justify-content: center;
gap 10px;
}