在我输入数据后，我的表格显示不正确
在我输入数据后，我的表格显示不正确
提问于 2020-03-05 03:56:25
我使用Html，CSS和javascript创建了一个表格。我制作了第一个分别显示星期几和学期的单元格，但其他单元格是联合的。当我通过代码手动输入数据或通过单击输入数据时，出现问题。细胞一直在膨胀。有人能告诉我我的代码哪里出了问题吗？当我输入数据时，我不希望单元格扩展。这些是图片，https://ibb.co/NWdf0Rs https://ibb.co/WzVjP0L。CSS文件在这里：https://easyupload.io/z7g1fh
<table>
<thead>
<!--Semesters-->
<tr class="content-table"><th>Day</th></tr>
<tr class="content-table-zero"><th>Time</th></tr>
<tr class="content-table-one"><th>1st Year 1st Sem</th></tr>
<tr class="content-table-two"><th>1st Year 2nd Sem</th></tr>
<tr class="content-table-three"><th>1st Year 3rd Sem</th></tr>
<tr class="content-table-four"><th>2nd Year 1st Sem</th></tr>
<!--D.T.WK-->
<tr class="content-table-days"><th><h6>MONDAY</h6></th></tr>
<tr class="content-table-tuesday"><th><h6>TUESDAY</h6></th></tr>
<tr class="content-table-wednesday"><th><h6>WEDNESDAY</h6></th></tr>
<tr class="content-table-thursday"><th><h6>THURSDAY</h6></th></tr>
<tr class="content-table-friday"><th><h6>FRIDAY</h6></th></tr>
<tr class="content-table-saturday"><th><h6>SATURDAY</h6></th></tr>
<tr class="content-table-sunday"><th><h6>SUNDAY</h6></th></tr>
<!--Units-->
<!--Monday-->
<tr class="table-content">
<td class="content-units"><h5>8 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-2">
<td class="content-units" ><h5>10-12</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-3">
<td class="content-units" ><h5>12 - 1</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-4">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Monday End-->
<!--Tuesday-->
<tr class="table-content-5">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-6">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-7">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-8">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-9">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-10">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Tuesday End-->
<!--Wednesday-->
<tr class="table-content-11">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-12">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-13">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-14">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-15">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Wednesday End-->
<!--Thursday-->
<tr class="table-content-16">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-17">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-18">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-19">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-20">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Thursday End-->
<!--Friday-->
<tr class="table-content-21">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-22">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-23">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-24">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-25">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Friday End-->
<!--Saturday-->
<tr class="table-content-26">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-27">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-28">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-29">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-30">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Saturday End-->
<!--Sunday -->
<tr class="table-content-31">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-32">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-33">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-34">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-35">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
</thead>
<script type="text/javascript">
$("td").click(function(event) {
/*Act on the event */
event.stopPropagation();
$("table textarea").each(function(index, el) {
w = $(el).outerWidth();
text = $(el).val();
if(text == ''){
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -10px; width: '+w+'px; height: 53px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
else{
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -46px; width: '+w+'px; height: 53px; border:1px solid #000; overflow-y: auto;word-wrap: break-word;">'+text+'</div>');
}
});
w = $(this).outerWidth();
$(this).html('<textarea onclick="fun(event)" style="resize: none; position: relative; top: -11px; width: '+w+'px; height: 53px; border:1px solid #000;"></textarea>');
});
$(window).click(function(event) {
/* Act on the event */
$("table textarea").each(function(index, el) {
w = $(el).outerWidth();
text = $(el).val();
if(text == ''){
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -11px; width: '+w+'px; height: 50px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
else{
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -46px; width: '+w+'px; height: 50px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
});
});
function fun(e){
e.stopPropagation();
e.preventDefault();
}
</script>回答 1
Stack Overflow用户
发布于 2020-03-05 04:51:42
我认为解决方案可能涉及到评论的开头和结尾。(我把箭头放在线上)
<table>
<thead>
<tr class="content-table">
<!--Semesters-->
<th>Day</th></tr>
<tr class="content-table-zero"><th>Time</th></tr>
<tr class="content-table-one"><th>1st Year 1st Sem</th></tr>
<tr class="content-table-two"><th>1st Year 2nd Sem</th></tr>
<tr class="content-table-three"><th>1st Year 3rd Sem</th></tr>
<tr class="content-table-four"><th>2nd Year 1st Sem</th></tr>
>>>>> <!--<tr class="content-table-five"><th>2nd Year 3rd Sem</th></tr>
<tr class="content-table-six"><th>3rd Year 1st Sem</th></tr>看起来这种情况在很多地方都会发生，所以我建议您检查一下所有的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60533782
复制相关文章
相似问题
腾讯云开发者
