开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当<table>行中<td>中的<input>被切换为隐藏/显示为无/块时，如何修复<tr>中的列位置

当<table>行中<td>中的<input>被切换为隐藏/显示为无/块时，修复<tr>中的列位置可以通过以下方式实现：

使用CSS样式修复：通过为<td>元素设置CSS样式来调整列位置。可以使用display: none;将隐藏的<td>元素完全移除，这样可以保持其他列的位置不变。如果要将其显示为块状，则可以使用display: block;。
使用JavaScript修复：通过JavaScript动态调整<td>元素的样式来修复列位置。可以使用JavaScript中的DOM操作方法，如setAttribute()或style属性来修改元素的样式属性。当<input>的显示状态发生变化时，使用JavaScript获取对应的<td>元素，并设置其CSS样式来调整列位置。

以下是一个示例代码，演示如何使用JavaScript来修复列位置：

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>列1</td>
            <td id="td2">列2</td>
            <td>列3</td>
        </tr>
    </table>

    <button onclick="toggleInput()">切换<input>显示状态</button>

    <script>
        function toggleInput() {
            var td2 = document.getElementById("td2");
            var input = td2.getElementsByTagName("input")[0];

            if (input.style.display === "none") {
                input.style.display = "inline";
                td2.style.display = "table-cell";
            } else {
                input.style.display = "none";
                td2.style.display = "none";
            }
        }
    </script>
</body>
</html>

这段代码演示了一个包含一个<table>的简单网页，其中第二列使用了<td>元素，并包含一个<input>元素。通过点击按钮，可以切换<input>元素的显示状态，从而动态调整第二列的显示与隐藏。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

全栈之前端 | 10.CSS3基础知识之表单表格学习

；在浏览器渲染时在接收到表格第一行后便可显示表格，而后者需要根据内容计算来显示表格所以加载时会稍慢。...visibility 属性 - 设置表格或其他元素是否可见或不可见描述: 此属性可以显示或隐藏元素而不更改文档的布局，此外该属性还可以隐藏 table> 元素中的行或列。...*/ visibility: collapse; /* 对于表格元素隐藏表格的行或列以及折叠的弹性元素和 ruby 元素会被隐藏，并且不占用任何空间，而对于其他元素，collapse 被视为与 hidden...属性隐藏结果图 caption-side 属性 - 设置表格的标题位置描述: 此属性会将表格的标题（）放到规定的位置，是具体显示的位置与表格的 writing-mode 属性值有关...#ffffff; } /* 为行、列数据占据空间，使表看起来更加清晰。

2261 0

前端(一)-Html

块元素：独占一行，比如:段落标签(p),标题标签(h1~h6),自带换行; 行内元素，可以在一行写多个的标签，靠内容撑开宽度;(a,strong,em...)...> table> 表标签 tr> tr> 行标签表头标签 td>td> 列标签 8.2 表格一些属性 align="center" 居中 border="1px"...="userName" value="用户名" size="30" maxlength="20"/> 10.3.2 password 密码框向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示...HH:mm:ss input type="datetime-local" /> 10.4 表单的高级应用 10.4.1 hidden隐藏域在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器..."/> 10.5 表单初级验证的方法 10.5.1 placeholder 提示语默认显示，当文本框中输入内容时提示语消失; input type="search" name="sousuo" placeholder

4.3K2 0

HTML入门的简单学习

caption标记如何正确使用：caption属性的插入位置，直接位于table属性之后，tr表格行之前 align属性：top标题放在表格的上部，botton标题放在表格的下部...(恢复至初始值，不是清空，name可以验证效果)，普通按钮提交按钮：当input type="submit">时，为提交按钮重置按钮：当input type="reset...">时，为重置按钮《以上两个按钮必须放在form表单下才可以体现功能》普通按钮：当input type="button">时，为普通按钮 8.4：单选框和复选框... 单选按钮：当type=radio时，为单选按钮复选框：当type=checkbox时，为复选框注意：单选框和复选框都可以使用checked属性来设置默认选中项... 8.5：隐藏域隐藏文本框：当type=hidden时，为隐藏文本框 8.6：多行文本域用法，使用textarea标记可以实现一个，能够输入多行文本的区域

4.2K10 0

HTML 基础

tr>tr> 定义表行，和td>必须位于tr>之中 30. 定义表格的第一行，单元格的内容会相对表格居中、加粗，td 允许被 th 替换 31.... 表尾行分组，允许包含一行或多行 tr ④. 如果不对 table 中的数据进行显示分组的话，默认都在 tbody 中 (2)....不规则表格，通过 td 的 colspan 和 rowspan 属性创建不规则的表格、 ①. colspan 跨列合并，在一行中，从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除...，但不想被用户看见的数据放在隐藏域中type="file" 文件选择框，用文件选择框时 form 的 method 属性必须为 post，form 的enctype 属性必须为 multipart/form-data...文字浮动框架，可以在一个浏览器窗口中同时显示多个页面文档的内容（在一个页面中引入另外一个页面)，内容可以为普通的文体描述，当浏览器不支持元素时，将显示该文本描述信息

4.2K1 0

HTML 基础

hidden定义隐藏的输入字段file定义输入字段和 "浏览"按钮，供文件上传，当表单出现文件上传的时候，提交方式只能是postselect 元素，表单控件，可创建单选或多选菜单，select 元素中的...预先选定复选框或单选按钮selected带有预先选定的选项的下拉列表，被预选的选项会显示在下拉列表最前面的位置disabled禁用一个 input 元素，被禁用的 input 元素既不可用，也不可点击，...value="确定"> table 元素，表格每个表格均有若干行（由 tr> 标签定义），每行被分割为若干单元格（由 td> 标签定义...td> tr> table>a 元素，锚点用于定义一个超链接到同一页上的某个位置，或者在网络上的任何其它页面，它也创建用于一个锚点——即超链接定位到页面中的内容...，如果图像的 url 是错误的，该图像不在支持的格式列表中，或者该图像还没有被下载，用户将会看到这个显示使用说明： 如果这个属性被省略，则表明图像是内容的关键部分，但没有等效的文本可用；如果把这个属性设置为空字符串

3.9K3 0

Bootstrap学习文档（二）

让表格更加紧凑注意：将表格包在一个class为table-responsive的div里，当屏幕尺寸小于768的时候会出现滚动条在表格中，Bootstrap 还封装了一些状态类，通过这些状态类可以为行或单元格设置颜色...checkbox checkbox的样式设置 checkbox-inline 让checkbox在一行中显示 radio radio的样式设置 radio-inline 让radio在一行中显示表单的校验状态类...hidden 不在占去文档流的位置 show 正常的显示 invisible 不可见，但仍会占有位置示例代码如下： .row div{ height: 100px;...-2 invisible">第4列第5列 6.居中显示 center-block 是一个块级元素居中，原理其实很简单...满足条件则隐藏 hidden-* * 的内容为 lg md sm xs 。

2.3K5 0

HTML5超级简单免费入手教程

，都有行（tr）和列（td），行及列都可以进行合并操作 0371-8888td> tr> table> colspan跨列的内容信息、还有一些底部的备注，此时就需要考虑一个问题如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead...目前行业中的程序员喜欢的划分，分三种块元素：单独占整行（自带换行符），可以设置宽高属性的行元素：可以在同一行显示，设置宽高不生效行内块元素：也可以在同一行显示，既可以设置宽高（img-本身自带了宽高属性...，display属性控制）嵌套规则 a.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的） b.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套

650 0

前端入门学习--HTML

每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母td指表格数据（table data），即数据单元格的内容。...row 2, cell 2td> tr> table> 注意：这个空的单元格的边框没有被显示出来。...row 2, cell 2td> tr> table> 跨行或跨列的表格单元格如何定义跨行或跨列的表格单元格横跨两列的单元格： table...77 854td> td>555 77 855td> tr> table> 横跨两行的单元格： table border="1"> tr> 姓名<...HTML 区块元素块级元素在浏览器显示时，通常会以新行来开始。例如 h1 p ul table HTML 内联元素内联元素在显示时通常不会以新行开始。

13.1K4 0

Web阶段：第一章：HTML语言

值是1-7,1最小，7最大 face属性设置文本的字体需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。...src 设置你要显示的图片路径 alt 当设置的路径找不到图片的时候，用来代替显示的文本 height 设置图片的高度...默认是居中，并加粗） b 标签是加粗标签 center 让被包含的内容居中显示需求1：做一个带表头的，三行，三列的表格，并显示边框需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。...table> 跨行跨列表格 colspan属性设置单元格所占的列数 rowspan属性设置单元格所占的行数需求1：新建一个五行，五列的表格...，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

9141 0

html标签详解

主要通过CSS样式为其赋予不同的表现。块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。...表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。...>李想td> td>睡觉td> tr> table> 属性: border: 表格边框. cellpadding: 内边距 cellspacing:...="post" 属性说明: name：表单提交时的“键”，注意和id的区别 value：表单提交时对应项的值 type：类型 type="button", "reset", "submit"时，为按钮上显示的文本年内容...默认被选中的项 readonly：text和password设置只读 disabled：禁用模式（输入框显示灰色），所有input均适用当type=text的时候，可以设置输入框的默认值，以及提示语：

2.6K11 0

web前端基础

div标签：用来定义一个块级标签又称为行外标签，块级标签独占一行 span标签：用来定义一个内联标签又称行内标签，行内标签不独占一行块级标签和内联标签分类：块级标签内联标签...img标签属性：标签属性描述 alt 当图片加载失败时，显示的文字 title 当鼠标悬浮再图片时显示的文字代码示例： <img...超链接标签属性：标签属性描述 target 点击超链接的动作 href 要跳转的网址代码示例：跳转到https://www.acai.cloud地址时用浏览器空白标签页打开...table表格标签组成：标签描述标题部分内容部分 tr>tr> 行...tr> td>阿才td> td>27td> tr> table> input输入框标签？

1.2K0 0

HTML知识点概括——一篇文章带你完全掌握HTML

：../ alt:表示图像名称，当图像不显示时，直接打出图像名称 title：当鼠标移动上去时出现的名称 width：宽度 height：高度 --> td>:列，需要写在行中 colspan="n":表示跨列，跨n列 rowspan=“n”：表示跨行，跨n行 --> table border="1px"> tr>...--当点击相同for和id的label属性时，会相当于点击id属性--> 点击我为后面button画勾 input type="checkbox...--表格分为n行2列--> table width="1000px"> <!

1.7K2 0

Web-第二天 HTML表单&CSS【悟空教程】

1.2.5.2 转换：display HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。...常见的块元素：、、等行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。...常见的行内元素：、等在开发中，希望行内元素具有块元素的特性，需要使用display进行转换选择器{display:属性值} 常用的属性值： inline：此元素将显示为行内元素（...行内元素默认的display属性值） block：此元素将显为块元素（块元素默认的display属性值） none：此元素将被隐藏，不显示，也不占用页面空间。...1.3 案例分析 1.3.1 知识点分析为了结构更好的显示表单，本案例我们需要使用table表格布局。根据“验证码”我们需要提供3列来显示数据，其他需要将中和右合并。最终需要创建3*10表格。 ?

4.3K4 0

HTML5 与CSS3 相关笔记

18.表格基本结构：单元格、行、列 (1)table>,tr>,,td> (2)HTML5中已废除table的border属性，用css控制边框宽度。...(3)跨列(横跨)：td colspan="所跨的列数">内容td> (4)跨行(竖跨)：td rowspan="所跨行数">内容td>，两者都要删除被合并的其他单元格。...（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。） 3、tr>：表格的一行，所以有几对tr 表格就有几行。...4、：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。 5、td>：表格的一个单元格，一行中包含几对这行中就有几个单元格。 6、表格中列的个数，取决于一行中数据单元格的个数。...table border="边距宽度"> tr> td rowspan="跨行数量" colspan="跨列数量" align="文本状态">td> tr> table> 表格可以添加标题和摘要标签进行优化

5.4K3 0

html笔记

blank ，也就是新建页面打开，默认值为 _self ，基于当前页面打开表格表格由table、tr、td组成，意思分别对应表格、行、个 table是表格标签表格的每一行都是一个tr，写在table...里面 td代表每一个格子，写在行里面，也就是tr 代码演示 table> tr> td>第一行第一格td> td>第一行第二格...td>第二行第一格td> td>第二行第二格td> td>第二行第三格td> tr> table> 更改后为 table border...">第一行第二格td> tr> tr> td>第二行第二格td> td>第二行第三格td> tr> table> 这两个属性是写在...属性设置为不可见，但是位置会保留与display的none属性不同的是，visibility会保留隐藏的位置 overflow溢出显示如果当前盒子内容超过了盒子的大小，则显示滚动条或者不显示多余内容等

1.8K1 0

BootStrap应用开发学习入门

-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。...；比如:row 分为 3 和 9 列，我们可以在9列中进行分 4 个 col-md-6 则，相对于在 9列中再次等分为2行12列；（具体查看下面的案例）列排序描述:以一种顺序编写列，然后以另一种顺序显示列....table-bordered #为所有表格的单元格添加边框 .table-hover #在内的任一行启用鼠标悬停状态 .table-condensed #在内的任一行启用鼠标悬停状态...--表格主体中的表格行的容器元素（tr>）--> .img-responsive { display: block; #当您把元素的 display 属性设置为 block，以块级元素显示。

14.6K3 0

BootStrap应用开发学习入门

；比如:row 分为 3 和 9 列，我们可以在9列中进行分 4 个 col-md-6 则，相对于在 9列中再次等分为2行12列；（具体查看下面的案例）列排序描述:以一种顺序编写列，然后以另一种顺序显示列...BS 代码展示两种方式显示代码： :内联显示代码 :显示为一个独立的块元素或者代码有多行 :显示变量赋值 :按键文本提示 : 电脑程序输出格式显示....table-bordered #为所有表格的单元格添加边框 .table-hover #在内的任一行启用鼠标悬停状态 .table-condensed #在内的任一行启用鼠标悬停状态...--表格主体中的表格行的容器元素（tr>）--> .img-responsive { display: block; #当您把元素的 display 属性设置为 block，以块级元素显示。

17.6K2 0

html常用标签

这段代码表示“这是愷龍的公众号”这几个字时红色、楷体、大小为4的字特殊字符在一般的编程语言中我们都是用转义字符来实现换行，最典型的就是\n 但是在HTML语言中\n是不能实现换行的我们来看一下如果用...在网页中没有做设置时，网页链接默认的窗口为_self。 _blank _blank是最常见的链接方式，表示超链接的目标地址在新建窗口中打开。...html页面上显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片的边框大小 alt属性设置当指定路径找不到文件时，用来代替显示的文本内容...td> td>第3行第2列td> td>第3行第3列td> tr> table> 结果：似乎不像印象中的表格（是因为没有边框）...tr> tr> td>第3行第1列td> td>第3行第2列td> td>第3行第3列td> tr> table

1.8K1 0

CSS进阶11-表格table

Missing cells的单元格就像被一个anonymous table-cell box占据了它们在网格中的位置一样被渲染。...如果它们被渲染，CSS 2.2没有定义列和表的宽度。当使用'table-layout：fixed'时，开发者不应该忽略第一行的列。以这种方式，一旦接收到完整的第一行，用户代理就可以开始进行表格布局。...当“height”属性导致表格变高时，CSS 2.2没有定义多余的空间如何分布。...该值导致整个行或列从显示中移除，并且由行或列正常占据的空间将用于其他内容。与折叠的列或行相交的跨行和列的内容会被剪切。但是，对行或列的抑制不会影响表格的布局。...当这个属性的值为'show'时，在空单元格周围/背后绘制边框和背景（像普通单元格一样）。 'hide'的值表示在空单元格周围/后面没有绘制边框或背景（参见17.5.1中的点6 ）。

6.6K3 0

WEB入门二表格和表单

而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量网站广泛应用，例如新闻列表、商品显示等。...td是“表格数据( TableData )”的英文缩写。td>标签定义一个列，嵌套于tr>标签内。border属性是最常用的属性，该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。...如示例2.1所示为在页面中添加一个2行3列的表格的代码。...密码框用于在表单中添加密码输入区域，浏览器将密码框中的每个字符都显示为星号 (*)使输入的容不可见。...多行文本框当我们要在网页中输入两行或两行以上的文本时，怎么办?

961 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭