新人求助啊，自定义显示内容的

时间：2021-12-25 06:02:46
我是一名从事C#开发的菜鸟，现在利用ASP.NET平台开发一个功能，在一个页面index.aspx中，我有一个“查询”按钮，还有一个“自定义设置查询条件”的按钮，点击‘自定义设置’，进入set.aspx页面，该页面含有的是一个表中的一些字段属性，你可以把其中的属性勾选作为查询条件，点击确定后，返回到index.aspx,这个时候要求，在“查询”按钮上方会自动显示该属性名以及一个texbox，比如：我勾选了‘姓名’，‘性别’，那么点确定之后，‘查询’按钮上方就会显示：姓名：（texBox）性别：（texBox）。请问最开始隐藏的这个区域用什么前端语言好呢，是<div>呢，还是一个<table>，如何动态的显示呢，隐藏的区域的内容因为是可变的，不是那种固定列行，所以不太会，请高手指教啊！

14 个解决方案

#1

我个人认为div好比较灵活 <table>不灵活 ，后台通过条件去判断选择的项

#2

用div吧，你可以用javascript做

#3

引用 1 楼 tiankongfeixiangdeyu 的回复:
我个人认为div好比较灵活 <table>不灵活 ，后台通过条件去判断选择的项

那<div>的属性如何配置呢？

#4

引用 2 楼 qq3895 的回复:
用div吧，你可以用javascript做

能具体点吗？你可以随意举点例子

#5

用不着div或table吧，

将所有字段加成不可见 Visible="false"

然后ID传参打钩传参 set.aspx?name=1&sex=1

if（name=1）

 name.visible=true;

if（sex=1）

 name.visible=true;

---

div和table的话也是这个思路，提前设置隐藏，根据传参显示

#6

不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟

#7

忘了说DIV做绝对定位了，

#8

引用 6 楼 hong10108 的回复:
不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟
呵呵，你说的真详细，谢谢你，不过我前端还不是很擅长，比如，隐藏，关闭，innerhtml方法，还有你下面说的绝对定位，我都接触过，但是都很生疏，有点连接不起来，

#9

在set页面将选中的值以对象的形式或xml格式传回来，然后对传过来的对象（xml）进行解析来显示最后的结果。

#10

建议你看看bugfree这个工具，它里面就有动态增加查询条件的代码，希望对你有帮助，bugfree是开源的

#11

根据不同情况选择用table还是div，表格化的东西用table，布局比较不规则用div

动态添加div或者table的内容主要用innerHTML,动态添加表格行用insertRow，动态添加表格列用insertCell

更详细的动态操作页面元素的教程看JavaScript高级程序设计第二版，网上有电子书

#12

引用 8 楼 ly15200853096 的回复:
Quote: 引用 6 楼 hong10108 的回复:

不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟
呵呵，你说的真详细，谢谢你，不过我前端还不是很擅长，比如，隐藏，关闭，innerhtml方法，还有你下面说的绝对定位，我都接触过，但是都很生疏，有点连接不起来，


很简单的，不过我没怎么有空，有空给你写都可以啊，

你搜索  js改变DIV显示隐藏，（其实是js控制css  display:none; block）

然后搜索div绝对定位（跟css有关）

再搜索innerHTML ，这个跟js有关，对指定ID写入HTML代码，

#13

div 和 table 的选择应该是在用 ASP 才需要考虑的吧，都 ASP.NET了，用 Panel 。

#14

完美测试， 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>


<body>


<div style=" border:1px solid #999; background:#CCC; height:30px; width:50%; margin:100px auto; position:relative;">

<div id="viwe1" style="float:left;"></div><input id="b1" type="button" value="自定义查询" onclick="onSelect();" />

<div id="SelectViwe" style=" display:none; border:1px solid #999; background:#CCC; width:99%; position:absolute; top:40px; left:0px;">

<input type="checkbox" name="sex" value="性别" />性别&nbsp;&nbsp;<input type="checkbox" name="Uname" value="名字" />名字

<br /><br />

<input type="button" id="b2" value="确定" onclick="okSelect();" />

</div>

</div>


<script type="text/javascript">

 function onSelect()

 {

	 document.getElementById("SelectViwe").style.display="block";

	 }

 function okSelect()

 {

	 document.getElementById("viwe1").innerHTML="";

	 if(document.getElementById("sex").checked) document.getElementById("viwe1").innerHTML="<input type='radio' name='sex1' value='男' />男&nbsp;&nbsp;<input type='radio' name='sex1' value='女' />女&nbsp;&nbsp;";

	 if(document.getElementById("Uname").checked) document.getElementById("viwe1").innerHTML+="名字:<input type='text' name='Sname' value='输入名字' size='15'/>&nbsp;&nbsp;";

	 document.getElementById("SelectViwe").style.display="none";

	 }

</script>

</body>

</html>

#1

我个人认为div好比较灵活 <table>不灵活 ，后台通过条件去判断选择的项

#2

用div吧，你可以用javascript做

#3

引用 1 楼 tiankongfeixiangdeyu 的回复:
我个人认为div好比较灵活 <table>不灵活 ，后台通过条件去判断选择的项

那<div>的属性如何配置呢？

#4

引用 2 楼 qq3895 的回复:
用div吧，你可以用javascript做

能具体点吗？你可以随意举点例子

#5

用不着div或table吧，

将所有字段加成不可见 Visible="false"

然后ID传参打钩传参 set.aspx?name=1&sex=1

if（name=1）

 name.visible=true;

if（sex=1）

 name.visible=true;

---

div和table的话也是这个思路，提前设置隐藏，根据传参显示

#6

不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟

#7

忘了说DIV做绝对定位了，

#8

引用 6 楼 hong10108 的回复:
不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟
呵呵，你说的真详细，谢谢你，不过我前端还不是很擅长，比如，隐藏，关闭，innerhtml方法，还有你下面说的绝对定位，我都接触过，但是都很生疏，有点连接不起来，

#9

在set页面将选中的值以对象的形式或xml格式传回来，然后对传过来的对象（xml）进行解析来显示最后的结果。

#10

建议你看看bugfree这个工具，它里面就有动态增加查询条件的代码，希望对你有帮助，bugfree是开源的

#11

根据不同情况选择用table还是div，表格化的东西用table，布局比较不规则用div

动态添加div或者table的内容主要用innerHTML,动态添加表格行用insertRow，动态添加表格列用insertCell

更详细的动态操作页面元素的教程看JavaScript高级程序设计第二版，网上有电子书

#12

引用 8 楼 ly15200853096 的回复:
Quote: 引用 6 楼 hong10108 的回复:

不要set页面了，

index页面body做相对定位，，

对一个DIV布局好，，index-z:最上面

JS点击自定义按扭，，显示DIV，，对div中的各属性checkbox选择后，

点关闭，其实是隐藏，关闭后再innerHTML，，在你想要显示的地方输出HTML代码，输出你想要的input text

不懂再问，我是也菜鸟
呵呵，你说的真详细，谢谢你，不过我前端还不是很擅长，比如，隐藏，关闭，innerhtml方法，还有你下面说的绝对定位，我都接触过，但是都很生疏，有点连接不起来，


很简单的，不过我没怎么有空，有空给你写都可以啊，

你搜索  js改变DIV显示隐藏，（其实是js控制css  display:none; block）

然后搜索div绝对定位（跟css有关）

再搜索innerHTML ，这个跟js有关，对指定ID写入HTML代码，

#13

div 和 table 的选择应该是在用 ASP 才需要考虑的吧，都 ASP.NET了，用 Panel 。

#14

完美测试， 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>


<body>


<div style=" border:1px solid #999; background:#CCC; height:30px; width:50%; margin:100px auto; position:relative;">

<div id="viwe1" style="float:left;"></div><input id="b1" type="button" value="自定义查询" onclick="onSelect();" />

<div id="SelectViwe" style=" display:none; border:1px solid #999; background:#CCC; width:99%; position:absolute; top:40px; left:0px;">

<input type="checkbox" name="sex" value="性别" />性别&nbsp;&nbsp;<input type="checkbox" name="Uname" value="名字" />名字

<br /><br />

<input type="button" id="b2" value="确定" onclick="okSelect();" />

</div>

</div>


<script type="text/javascript">

 function onSelect()

 {

	 document.getElementById("SelectViwe").style.display="block";

	 }

 function okSelect()

 {

	 document.getElementById("viwe1").innerHTML="";

	 if(document.getElementById("sex").checked) document.getElementById("viwe1").innerHTML="<input type='radio' name='sex1' value='男' />男&nbsp;&nbsp;<input type='radio' name='sex1' value='女' />女&nbsp;&nbsp;";

	 if(document.getElementById("Uname").checked) document.getElementById("viwe1").innerHTML+="名字:<input type='text' name='Sname' value='输入名字' size='15'/>&nbsp;&nbsp;";

	 document.getElementById("SelectViwe").style.display="none";

	 }

</script>

</body>

</html>

标签：

相关文章