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

21
main.js
View File

@ -15,3 +15,24 @@ function redBg() {
isRed = false; 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; display: block;
margin: 0 auto; margin: 0 auto;
} }
.head-col {
background-color: gray;
}
.adding {
display: flex;
justify-content: center;
gap 10px;
}
.inputTable {
display: flex;
justify-content: center;
gap 10px;
}