<td class="css" align=center>的居中不在className和innerHTML中被提取

最新推荐文章于 2022-11-24 09:09:56 发布
最新推荐文章于 2022-11-24 09:09:56 发布 · 372 阅读 · 0
文章标签：

#innerhtml #classname #javascript #html #css #ViewUI

本文详细介绍了在使用JavaScript为HTML表格动态添加行时，如何保持表格头居中属性不丢失的技术解决方案。通过两种方法：在内容外包裹<center>标签或将相关CSS样式调整为包含text-align:center，确保表格头部元素始终保持居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面多条输入时第一行的html table静态显示在页面上，通过点击“新增”按钮新增一行输入框，这里是用javascript实现的，将另一个style=display:none的table每列cells的className和innerHTML赋值给新TR的办法插入到原表下方。

原表第一列是居中的，<td class="css" align=center>。但innerHTML仅能取到TD内部的内容，className取到了css，align的居中属性在这次传递中丢失了，新插入行的第一列不再居中。

两个解决办法：
1 TD内容外围再包一层<center></center>。
2 引用的css新增text-align:center居中属性，当然要分析其他引用此css地方的关联影响。
shadowalker
关注
前端学习：javascript进阶
彭世瑜的博客
02-24 1258
知识点 复习 html 标签，块级 行内 css position background text-align margin padding font-size z-index over-flow :hover opacity float(clear:both) line-height ...
Web前端
qq_48975137的博客
03-28 1107
HTML CSS JavaScript jQuery（js框架） Bootstrap（CSS框架） AJAX JSON
html innerhtml br,如何将javascript innerhtml居中
weixin_39900582的博客
06-18 418
好的,首先嗨,我对今天刚开始的这件事完全不熟悉,我正在编写一个脚本,需要添加一些内部HTML,我想知道我是否需要将每一行居中,或者将开始居中,而不是结束居中?我做得对吗?如果你觉得我可以做得更好,请让我知道不能做jquery。例Avar settingsHtml = '';settingsHtml += "settings";settingsHtml += "TEXT HERE";setting...
html文本中心居中,在html数字输入中居中文本(Center text in html number input)
weixin_42458282的博客
05-31 1308
在html数字输入中居中文本(Center text in html number input)我有一个在html中的数字输入。 我想中心文本(即输入)在里面。 我当然做到了：text-align: center;哪种作品。 但问题是。 当显示这些箭头时，文本现在居中。 但是当箭头消失时，文本停留在现在不再是中心的相同位置。I have a number input in html. I want...
style操作 / cssText / innerHtml / tagName / harf / src
kino2046的博客
09-01 456
JS中两种操作属性的方法 1 点 . （代表“的”） 元素.属性 box.onclick = function(){ box.style.width='300px' }； 2 方括号[ ] 元素['属性'] 比较好，可修改 box['onclick'] = fu...
html语言中<td>标签的class属性的作用
热门推荐
Hunter的博客
09-12 2万+
其实class属性的值对应的就是你定义的css的名字，它和class的属性值相对应。 例如：&lt;td class="t1"&gt;&lt;/td&gt; &lt;style type="text/css"&gt; .t1 { font-size: 12px;//字体大小 line-height: 22px;//文本行高 color: #000000;//文本颜色 margin: 6px;//...
DIV内容居中
Saladbobo的专栏
08-01 1579
1.flex布局实现 css代码 .box{ width: 200px; height: 200px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; background: #AAA; } .inner{ width: 100px; he...
黑马就业班（02.JavaWeb+项目实战\02.JavaScript）——part2：BOM&DOM
LKJgdut的博客
01-20 635
今日内容： 1. JavaScript： 1) ECMAScript 2) BOM 3) DOM 1、事件与DOM的案例介绍   案例1 <img id="light1" src="image1/off.gif" onclick="fun1()"/> <!--注意，我们在标签内部设置的时候需要加括号--> <img id="light2" src=...
JS动态生成分页组件 | 通过按键实现移动控制
qq_54797114的博客
11-24 615
有以下和：HTML结构 CSS样式 案例需求 界面中存在的，系统会随机实例化各种实例，按照如下要求补充完成函数。最多连续显示5页，居中高亮显示页（如所示)： 时，隐藏该组件（如所示）：如果，则显示全部页数，隐藏“首页”和“末页”元素（如所示）：当居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如和所示)：、均为正整数，上面效果演示是 执行后的结果 这个案例中是一个构造函数，需要通过操作符调用，需要注意的是内的方法（如方法）需要先挂载到上（）才能被中的其它成员访问（通过访问）知识点：有以下和
js案例-点击+电灯开关+轮播图+动态表格+表格全选+登录表格验证
weixin_44325370的博客
12-15 281
案例 1.点击 <body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2()
html js设置文字垂直居中,javascript实现在指定元素中垂直水平居中
weixin_39907596的博客
06-11 2532
本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，下面就以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下:#box{width:200px;height:150px;background:blue;position:relative;}#antzone{background:green;}window.onload=function()...
Jquery动态给表格中的Td追加class
steamPlayGame的博客
10-16 1296
Jquery动态给表格中的Td追加class <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(f
innerHTML 用法
yihuei123的专栏
04-23 6753
用法：比如在中写了如下的代码：现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="";就可以在top对应的位置出现一个button了！爽吧，在公告前加javascript就行老，直接改HTML。。。function Test(){        var str="";        str+="Hel
div内容居中_居中问题
weixin_39877182的博客
11-29 207
居中是面试中常考的问题，涉及到 文字居中 和 块元素 居中两种。先介绍一下几个常见的属性，了解他们的含义再介绍用法1. 常见的属性 vertical-align: center、text-align: center、margin: 0 autovertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。text-align CSS属性定义行内...
<td align="center"> </td>不居中
ztao2333的博客
12-14 416
;&lt;/table&gt;此代码按钮Download不居中，而是左对齐。   &lt;table  align="center"&gt;    &lt;tr&gt;       &lt;td align="center"&gt;        &lt;Field:button value="Download" type="confirm" oncli
<table class="table text-center"> <tr> <td class="table-light" style="width: 45px" > <input type="checkbox" id="selectAll"> </td> <td class="table-primary">学生编号</td> <td class="table-info">学生学号</td> <td class="table-success">学生姓名</td> <td class="table-danger">学生性别</td> <td class="table-warning">学生出生日期</td> <td class="table-info">学生地址</td> <td class="table-light">学生电话</td> <td class="table-primary">学生照片</td> <td class="table-danger">学生班级</td> <td class="table-dark">操作</td> </tr> <c:forEach items="${list.list }" var="student" varStatus="status"> <tr> <td style="width: 45px" ><input type="checkbox" name="idCheckbox" value="${student.stuId }"> </td> <td>${student.stuId }</td> <td>${student.stuNo}</td> <td>${student.stuName }</td> <td>${student.stuSex }</td> <td>${student.stuBirth }</td> <td>${student.stuAddress }</td> <td>${student.stuPhone }</td> <td><img alt="" src="${pageContext.request.contextPath}/images/StudentPhoto/${student.stuPhoto }" width="100px" height="100px"></td> <td>${student.classes.className }</td>美化一下
06-10
你可以使用 Bootstrap 或者其他 CSS 框架对这个表格进行美化。例如，可以添加表头样式、表格边框、表格行的鼠标悬停效果等等。以下是一个简单的示例： ```html <table class="table table-bordered table-hover"> <thead class="thead-dark"> <tr> <th style="width: 45px"><input type="checkbox" id="selectAll"></th> <th>学生编号</th> <th>学生学号</th> <th>学生姓名</th> <th>学生性别</th> <th>学生出生日期</th> <th>学生地址</th> <th>学生电话</th> <th>学生照片</th> <th>学生班级</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${list.list}" var="student" varStatus="status"> <tr> <td><input type="checkbox" name="idCheckbox" value="${student.stuId}"></td> <td>${student.stuId}</td> <td>${student.stuNo}</td> <td>${student.stuName}</td> <td>${student.stuSex}</td> <td>${student.stuBirth}</td> <td>${student.stuAddress}</td> <td>${student.stuPhone}</td> <td><img alt="" src="${pageContext.request.contextPath}/images/StudentPhoto/${student.stuPhoto}" width="100px" height="100px"></td> <td>${student.classes.className}</td> <td>操作按钮</td> </tr> </c:forEach> </tbody> </table> ``` 你可以根据自己的需求进行调整，达到更好的视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值