我有一张桌子,上面有学生的名字和日常课程。如果我双击一个学生,那么编辑器会打开,我可以在其中添加详细说明。一切正常,但是这个编辑器巫婆基本上是一张只有一行的桌子,它不能适应窗口的大小。 编辑器位于div内,该div会调整窗口大小,但表格不会显示。
这是HTML代码
<main>
<div id="home">
<h2 id="date"></h2>
<table id="table">
//this is the table with all the students
</table>
<div id="dropdown" class="dropdown">
<select id="select">
<option value="Nothing">Nichts ausgewählt</option>
<option value="Extern">Extern</option>
<option value="Termin">Termin</option>
<option value="Schule">Schule</option>
</select>
</div>
<div id="legend" class="legend">
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#D3D3D3;" />
</svg>
<a>Extern</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFAEB9;" />
</svg>
<a>Termin</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFFF00;" />
</svg>
<a>Schule</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#00FF00;" />
</svg>
<a>Visiert</a>
<br>
<button id="edit">Editieren</button>
</div>
<div id="editor">
//here i add the editor-table with one row
</div>
<button id="reset">Zurücksetzen</button>
</div>
</main>
添加编辑器的JS函数:
function openEditor(row){
var div = document.getElementById('editor');
var editor = document.createElement('table');
var student = document.createElement('tr');
var header = createHeader(["Name","Status","Fahlführer","Begl. Lehrperson","Instr.","Austritt"]);
editor.classList.add('editor');
for( var i = 0; i < 7; i++){
var cell = document.createElement('td');
if(i == 0){
var name = document.createElement('label');
console.log(row);
console.log(row.cells[0]);
name.innerHTML= row.cells[0].childNodes[0].value;
cell.appendChild(name);
}else if(i == 5){
var austritt = document.createElement('input');
austritt.type = 'date';
cell.appendChild(austritt);
}else if(i== 6){
var button = document.createElement('button');
button.innerHTML= "Speichern";
button.onclick = function(){safe();};
cell.appendChild(button);
}else{
var input = document.createElement('input');
cell.appendChild(input);
}
student.appendChild(cell);
}
editor.appendChild(header);
editor.appendChild(student);
div.appendChild(editor);
}
和整个CSS:
html, body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
h3{
margin-right:50%;
}
table{
width:100%;
}
*{
margin: 0;
padding: 0;
font-family: monospace;
box-sizing: border-box;
}
#container{
position:absolute;
margin: 4% 4% 4% 4%;
padding: 2%;
width: 90%;
height: 90%;
background-color: #fff;
}
ul {
width:100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006975;
}
li {
width:25%;
float: left;
}
h1{
text-align:center;
}
input{
font: 18px Helvetica, Arial, sans-serif;
}
li a {
display: block;
color: white;
font-size: 120%;
text-align: center;
padding: 14px 16px;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
color: #006975;
background-color: #fff;
}
#links{
width:66%;
float:left;
}
#rechts{
width:33%;
float:right;
}
#last{
float:right;
}
main{
height: 100%;
width: 100%;
}
body{
background-color: #006975;
overflow-y:hidden;
}
#reset{
float:right;
margin-top:7%;
font-size: 120%;
height:10%;
width: 45%;
color: #fff;
background-color:#006975;
}
#view{
position:relative;
height:75%;
}
button:hover{
color:#fff;
background-color:#84afb8;
}
#home{
height:75%;
}
#dropdown{
width:100%;
visibility:hidden;
}
//the following styles the editor-table
table.editor{
width:100%;
border: 2px solid black;
padding: 5px 5px 5px 5px;
margin-top: 1%;
}
table.editor td{
width:14%;
}
table.editor th{
text-align: left;
width:14%;
}
label{
font: 18px Helvetica, Arial, sans-serif;
}
.cell {
width: 10%;
text-align: center;
background-color: #D3D3D3;
}
.cell.on {
width: 10%;
background-color: #00FF00;
}
.cell.les {
width: 10%;
background-color: #FFFF00;
}
.cell.term {
width: 10%;
background-color: #FFAEB9;
}
.cell.ext{
width: 10%;
background-color: #D3D3D3;
}
.cell.spacer {
width: 10%;
background-color:white;
}
input.name {
width: 90%;
}
input.selected{
background-color: red;
}
更多代码请
编辑: