我创建了一个引导表,其中将动态添加行。但是表格主体和表格标题对齐方式不匹配,如下面的代码段所示。
function display() {
var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
var rowsAdd = tableRef.insertRow(tableRef.rows.length);
// var m = moment().format('YYYY-MM-DD h:mm a');
var newCell = rowsAdd.insertCell();
newCell.innerHTML = "<input type='text' form ='form1' class= 'form-control input-sm' value=' ' id = 'typeofdr' name= 'typeofdr' required>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'drugname' name= 'drugname' required> </td></tr>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'strdrug' name= 'strdrug' required> </td></tr>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'dosage' name= 'dosage' required> </td></tr>";
newCell.style.width = '50px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'dm' value= 'on' name= 'dm' ><input type='hidden' name='dm' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'da' name= 'da' value='on' ><input type='hidden' name='da' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'de' name= 'de' value='on' ><input type='hidden' name='de' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'dn' name= 'dn' value='on' ><input type='hidden' name='dn' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><select form ='form1' class= 'form-control input-sm' value=' ' id = 'baf' name= 'baf' required><option>Before</option><option>After</option></select> </td></tr>";
newCell.style.width = '90px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'totn' name= 'totn' required> </td></tr>";
newCell.style.width = '70px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'nofdays' name= 'nofdays' required> </td></tr>";
newCell.style.width = '50px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td class='tds'><i class='fa fa-trash-o' font-size:20px' onclick='deleteRow(this)'></i></td></tr>";
newCell.style.width = '50px';
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable1").deleteRow(i);
}
&#13;
table.alpha th {
background-color: #009999;
color: white;
}
table.alpha .tbalpha {
height: 200px;
overflow-y: auto;
}
table.alpha .thalpha,
.tbalpha {
display: block;
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-striped table-bordered table-responsive table-hover table-condensed alpha" style="width: 760px; " id="myTable1">
<thead class="thalpha">
<tr>
<th rowspan="2" style="width:100px;">Item</th>
<th rowspan="2" style="width:100px;">Name of Drug</th>
<th rowspan="2" style="width:100px;">Strength of Drug</th>
<th rowspan="2" style="width:50px;">Dosage</th>
<th colspan="4" style="width:150px;">Frequency</th>
<th rowspan="2" style="width:90px;">Before /After Food</th>
<th rowspan="2" style="width:70px;">Total No. of Tablets to be dispensed</th>
<th rowspan="2" style="width:50px;">No. of Days</th>
<th rowspan="2" style="width:30px;">Delete Row</th>
</tr>
<tr>
<th style="width:37.5px;">M</th>
<th style="width:37.5px;">A</th>
<th style="width:37.5px;">E</th>
<th style="width:37.5px;">N</th>
</tr>
</thead>
<tbody class="tbalpha">
</tbody>
<tr id="hide">
<td><i class='fa fa-plus' style='font-size:20px; color : #ff9900;' onclick="display()"></i></td>
</tr>
</table>
</div>
&#13;
如上面的代码片段所示,表格列标题和表格主体列行未正确对齐i,表格单元格并不完全低于其相应的标题单元格。我猜css可能有问题,但是如果在css中移除display:block,即使设置了高度,表体高度也会减小(在上面的css代码中,tbody height设置为200px)。
答案 0 :(得分:0)
这是因为您正在改变tbody
和thead
显示的方式:
table.alpha .thalpha, .tbalpha {
display: block;
}
如果删除它,列将对齐
答案 1 :(得分:0)
您不能更改display
的{{1}}属性,因为它的默认属性为tbody
。删除display: table-row-group
会使其正确对齐。
display
function display() {
var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
var rowsAdd = tableRef.insertRow(tableRef.rows.length);
// var m = moment().format('YYYY-MM-DD h:mm a');
var newCell = rowsAdd.insertCell();
newCell.innerHTML = "<input type='text' form ='form1' class= 'form-control input-sm' value=' ' id = 'typeofdr' name= 'typeofdr' required>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'drugname' name= 'drugname' required> </td></tr>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'strdrug' name= 'strdrug' required> </td></tr>";
newCell.style.width = '100px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'dosage' name= 'dosage' required> </td></tr>";
newCell.style.width = '50px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'dm' value= 'on' name= 'dm' ><input type='hidden' name='dm' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'da' name= 'da' value='on' ><input type='hidden' name='da' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'de' name= 'de' value='on' ><input type='hidden' name='de' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= '' type='checkbox' id = 'dn' name= 'dn' value='on' ><input type='hidden' name='dn' value='off' form='form1'> </td></tr>";
newCell.style.width = '37.5px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><select form ='form1' class= 'form-control input-sm' value=' ' id = 'baf' name= 'baf' required><option>Before</option><option>After</option></select> </td></tr>";
newCell.style.width = '90px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'totn' name= 'totn' required> </td></tr>";
newCell.style.width = '70px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td><input form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'nofdays' name= 'nofdays' required> </td></tr>";
newCell.style.width = '50px';
newCell = rowsAdd.insertCell();
newCell.innerHTML = "<tr><td class='tds'><i class='fa fa-trash-o' font-size:20px' onclick='deleteRow(this)'></i></td></tr>";
//newCell.style.width = '50px';
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable1").deleteRow(i);
}
table.alpha th {
background-color: #009999;
color: white;
}
table.alpha {
display: block;
height: 300px;
overflow-y: auto;
}
注意将<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-striped table-bordered table-responsive table-hover table-condensed alpha" style="width: 760px; " id="myTable1">
<thead class="thalpha">
<tr>
<th rowspan="2" style="width:100px;">Item</th>
<th rowspan="2" style="width:100px;">Name of Drug</th>
<th rowspan="2" style="width:100px;">Strength of Drug</th>
<th rowspan="2" style="width:50px;">Dosage</th>
<th colspan="4" style="width:150px;">Frequency</th>
<th rowspan="2" style="width:90px;">Before /After Food</th>
<th rowspan="2" style="width:70px;">Total No. of Tablets to be dispensed</th>
<th rowspan="2" style="width:50px;">No. of Days</th>
<th rowspan="2" style="width:30px;">Delete Row</th>
</tr>
<tr>
<th style="width:37.5px;">M</th>
<th style="width:37.5px;">A</th>
<th style="width:37.5px;">E</th>
<th style="width:37.5px;">N</th>
</tr>
</thead>
<tbody class="tbalpha">
</tbody>
<tr id="hide">
<td><i class='fa fa-plus' style='font-size:20px; color : #ff9900;' onclick="display()"></i></td>
</tr>
</table>
</div>
设置为display: block
将延长至100%table
。