动态显示隐藏tbody/div

最新推荐文章于 2021-06-04 03:23:26 发布
最新推荐文章于 2021-06-04 03:23:26 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： Jsp Javascript 文章标签： input border action function email table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng8008/article/details/1789740
版权
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <title>User Regisiter</title>
    </head>
    <script type="text/javascript">
        var i=1;
        function showadv(){
            if(document.regForm.advshow.checked == true)
                adv.style.display = "";
            else
                adv.style.display = "none";
        }
           
       
    </script>
    <body>
        <form action="/userReg" method="post" name="regForm">
   
            <table width="100%" bgcolor="#F4A460" border="1" bordercolor="#A0522D">
                <tr>
                    <th colspan="2" bgcolor="#A0522D" align="left" height="38">&nbsp;&nbsp;注册</th>
                </tr>
                <tr>
                    <th colspan="2" align="left">&nbsp;必填</th>
                </tr>
                <tr>
                    <td width="21%">&nbsp;用户名</td>
                    <td><input type="text" name="userName" οnblur="checkUser()"/></td>
                </tr>
                <tr>
                    <td>&nbsp;密码</td>
                    <td><input type="password" name="pass" οnblur="checkPass()"/></td>
                </tr>
                <tr>
                    <td>&nbsp;确认密码</td>
                    <td><input type="password" name="repass" οnblur="checkrepass()"/></td>
                </tr>
                <tr>
                    <td>&nbsp;Email</td>
                    <td><input type="text" name="email" οnblur="checkEmail()"/></td>
                </tr>
                <tr>
                    <td>&nbsp;高级选项</td>
                    <td><input type="checkbox" name="adcshow" checked value="1" οnclick="showadv()"/>显示高级选项</td>
                </tr>
                <tbody id=adv style="display: ;">
                <tr>
                    <th colspan="2" align="left">&nbsp;选填</th>
                </tr>
                <tr>
                    <td>&nbsp;安全提问</td>
                    <td><select name="key">
                            <option>无安全问题</option>
                            <option value="1">你最喜欢的</option>
                            <option value="2">你最讨厌的</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;答案</td>
                    <td><input type="text" name="value"/> </td>
                </tr>
                <tr>
                    <td>&nbsp;性别</td>
                    <td><input type="radio" value="0" name="sex">男
                        <input type="radio" value="1" name="sex">女
                        <input type="radio" value="2" name="sex" checked>保密
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;生日</td>
                    <td><input type="text" name="birth" value="1900-01-01"/></td>
                </tr>
                <tr>
                    <td>&nbsp;来自</td>
                    <td><input type="text" name="from"/></td>
                </tr>
                <tr>
                    <td>&nbsp;QQ</td>
                    <td><input type="text" name="QQ"/></td>
                </tr>
                <tr>
                    <td>&nbsp;MSN</td>
                    <td><input type="text" name="MSN"/></td>
                </tr>
                <tr>
                    <td>&nbsp;个人简介</td>
                    <td><textarea name="resume" rows="4" cols="30">
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;个性签名</td>
                    <td><textarea name="perSign" rows="4" cols="30">
                        </textarea>
                    </td>
                </tr>
                </tbody>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="提交"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

 
feng8008
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js tr控制下面的tbody隐藏和显示
10-30
个问题弄了我几天没心思写程序，问了论坛很多网友才搞定的。
html 中的tr th td
thebesttome的专栏
10-18 4001
转帖地址：http://www.jzxue.com/wangyesheji/html/201104/26-7274.html 表格是html中经常使用到的，简单的使用可能很多人都没问题，但是更深入的了解的人恐怕不多，下面我们先来看一下如何使用。 是的上层标签 必须在一个里面
关于JSP页面中根据checked的值显示隐藏行的问题
dong3933的博客
06-16 280
这是一个查询页面，在我的JSP页面中有一个单选框，C标签根据从数据库中获取到的值选择checked=“checked”与否： 当单机单选框时会调用一个showme（）方法，选中则显示隐藏的两行，未选中则隐藏。这两行的<tr>里面都给了一个class="yinc"用来在Jquery中的showme（）方法控制隐藏与否： 好了背景介绍到这里，接下来进入正题。期初我将...
html给body.设置隐藏,css如何设置不可见？
weixin_33438009的博客
06-03 904
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。示例：使用...
jsp的table的显示和隐藏
qq_36457575的博客
06-19 3151
jsp的table的显示和隐藏&lt;script&gt;function show(){ var myTable= document.getElementById("myTable"); myTable.style.display="block";}function hidden(){var myTable= document.getElementById('myTable); myTable....
jsp页面中div怎么显示html,jsp怎么把div隐藏
weixin_28882103的博客
06-03 1433
在web页面中，经常需要使用select控件来显示div的显示与隐藏，实现这个方法主要用到了setAttribute方法。以下为示例代码：通过选择项显示不同的结果function showdiv(){var doc=document;var citytext=doc.getElementById("city").value;var div1=doc.getElementById("div1");v...
标签的动态添加、隐藏和显示、事件
petercnmei的专栏
05-15 2360
标签的动态添加和 function addElement() { $("#insertTR").show();         $("#insertTD").show();         $("#hideSelect").show(); var carNo = $("#carNo").val(); alert(carNo); //var person = document.
jsp页面 隐藏和显示内容
热门推荐
qq_33180812的博客
12-15 1万+
JSP Page function yincang(){ $("div a:first").css("display","none"); } function xianshi(){ $("div a:first").show(); }
html 隐藏tbody,隐藏的<tbody>
weixin_29010003的博客
06-04 724
用Javascript实现一个类似Excel表格的功能：输入一行表格后，点击一个按钮，在表格最下面增加一行以便用户继续输入一行数据。 属性从略可增长表格Javascript代码如下function addNew_onclick(){var newTr = document.create('tr');var oldNode = document.getElementById('trAddBtn...
jsp中写隐藏td标签_js动态控制表单的trtd的显示和隐藏
weixin_39640849的博客
12-19 2269
js动态控制表单的tr，td的显示和隐藏无论是事先写好的，还是动态生成的，要找到指定的tr或td都必须知道其相关的一个属性，未必必须是id或name，然后无论是在一个table还是多个table都可以通过document.getElementsByTagNames("tr")或td，取得集合，……再根据知道的属性再找，最后设置显示/隐藏方法一：document.getElementById(...
HTML参考 ：TBODY元素 详解
weixin_30414155的博客
08-08 333
TBODY 元素内包含的有效标签有： TD TH TR TBODY 元素会为全部表格自动定义，就算表格没有显式定义 TBODY 元素。 table 对象及其相关的元素有独立的表格对象模型，这与常规对象模型所采用的方法有很大不同。 此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可...
tbody元素支持嵌套的注意方法
12-10
function addMessage(messageID,userName,userCreateDate,articleCount,subject,body,creationDate,modifiedDate)  {  var br;  var row = document.createElement("tr");  var cell = document....
html tbody 用法
09-28
表格的分组显示(Structured Table) （IExplore Only） 1）按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) 例： <table> <...
firefox TBODY 用js显示和隐藏时出现错位的解决方法
10-30
今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。
AJAX responseText乱码解决
疯子风的个人空间
05-27 1970
今天碰到一个郁闷的问题：AJAX GET 到struts action返回responseText   时出现乱码????问题google下，网友们提供了几种解决办法：1.设置返回的编码格式：response.setHeader("Charset","GBK");2.把服务器端和客户端编码格式都统一设为utf-8,检查我的代码，我的都是utf-8的，照理符合第2种情况，不应该出
java调用chm文件
疯子风的个人空间
09-20 1965
try{Runtime.getRuntime().exec("cmd /c start C://help.chm");Desktop.getDesktop().open(new File("C://help.chm"));}catch(Exception e){ System.out.println(" execption");}; 
strus+ajax实例--用户注册(1)
疯子风的个人空间
09-19 825
1.新建工程userReg2.添加struts3.配置struts.配置后的struts-config.xml文件如下：                          attribute="UserForm"      input="/user/userReg.jsp"      name="UserForm"      path="/userReg"      scope="request"
strus+ajax实例--用户注册(2)
疯子风的个人空间
09-19 723
4.写jsp文件userReg.jsp如下:             User Regisiter                                function showadv(){            if(document.regForm.advshow.checked == true)                adv.style.display = "";   
vue 如何动态增加 删除 修改 显示与不显示 表格header字段 并与tbody 数据对应隐藏一列
最新发布
07-12
要实现表格header字段的动态增加、删除、修改以及显示与不显示，并且与tbody中的数据对应隐藏一列，你可以使用Vue中的数据绑定和条件渲染的方式来实现。 这里我们假设你有一个包含表格数据的数组，每个数据对象包含了与表格header字段对应的属性。 动态增加、删除和修改header字段： 你可以通过操作一个数组来动态增加、删除和修改header字段，并且使用该数组和tbody中的数据进行双向绑定。 ```html <template> <div> <table> <thead> <tr> <th v-for="(field, index) in fields" :key="field"> <input v-model="field" @input="updateField(index)"> <button @click="deleteField(index)">删除</button> </th> <th> <button @click="addField">新增字段</button> </th> </tr> </thead> <tbody> <tr v-for="item in data" :key="item.id"> <td v-for="field in fields" :key="field">{{ item[field] }}</td> <td> <!-- 这是隐藏的一列 --> </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { fields: ['字段1', '字段2', '字段3'], data: [ { id: 1, 字段1: '值1', 字段2: '值2', 字段3: '值3' }, { id: 2, 字段1: '值4', 字段2: '值5', 字段3: '值6' } ] }; }, methods: { addField() { this.fields.push('新字段'); this.data.forEach((item) => { item['新字段'] = ''; // 在数据对象中添加新字段的初始值 }); }, deleteField(index) { const deletedField = this.fields.splice(index, 1)[0]; this.data.forEach((item) => { delete item[deletedField]; // 删除数据对象中对应的字段 }); }, updateField(index) { // 数据已经在fields数组中进行了修改 } } } </script> ``` 上述代码中，我们通过操作`fields`数组来实现header字段的动态增加、删除和修改。每当新增或删除字段时，我们也相应地更新了每个数据对象中的属性。 显示与不显示header字段并与tbody数据对应隐藏一列： 你可以使用Vue的条件渲染指令`v-if`或`v-show`来实现显示与不显示header字段，并根据需要在tbody中隐藏对应的列。 ```html <template> <div> <table> <thead> <tr> <th v-for="(field, index) in fields" :key="field" v-show="shouldShowField(index)"> <input v-model="field" @input="updateField(index)"> <button @click="deleteField(index)">删除</button> </th> <th> <button @click="addField">新增字段</button> </th> </tr> </thead> <tbody> <tr v-for="item in data" :key="item.id"> <td v-for="(field, index) in fields" :key="field" v-show="shouldShowField(index)">{{ item[field] }}</td> <td> <!-- 这是隐藏的一列 --> </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { fields: ['字段1', '字段2', '字段3'], data: [ { id: 1, 字段1: '值1', 字段2: '值2', 字段3: '值3' }, { id: 2, 字段1: '值4', 字段2: '值5', 字段3: '值6' } ], showFields: [true, true, true] // 控制每个字段是否显示的数组 }; }, methods: { addField() { this.fields.push('新字段'); this.data.forEach((item) => { item['新字段'] = ''; // 在数据对象中添加新字段的初始值 }); this.showFields.push(true); }, deleteField(index) { const deletedField = this.fields.splice(index, 1)[0]; this.data.forEach((item) => { delete item[deletedField]; // 删除数据对象中对应的字段 }); this.showFields.splice(index, 1); }, updateField(index) { // 数据已经在fields数组中进行了修改 }, shouldShowField(index) { return this.showFields[index]; } } } </script> ``` 上述代码中，我们使用`showFields`数组来控制每个字段是否应该显示。根据`showFields`数组的值来决定每个字段的显示与隐藏，并在tbody中的对应列使用相同的条件渲染。 希望以上解答能够帮助到你！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值