利用JS+表单+php实现组装式数据查询，类似于数据库的UI

来源：互联网发布：nature数据库编辑：程序博客网时间：2024/04/30 04:11
1.如上效果
2.代码
<!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=utf-8" /><title>无标题文档</title><style type="text/css">.search {background-color: #CCC;width:500px;height:150px;border-radius:8px;}</style><script>function insert(){var obj = document.getElementById("field"); //定位idvar index = obj.selectedIndex; // 选中索引var text1 = obj.options[index].text; // 选中文本var value1 = obj.options[index].value; // 选中值var obj = document.getElementById("operation"); //定位idvar index = obj.selectedIndex; // 选中索引var text2 = obj.options[index].text; // 选中文本var value2 = obj.options[index].value; // 选中值text3 = document.getElementById("field_value").value;document.getElementById("sql").value +=" "+ value1 + " " + value2 +" "+"\'"+text3+"\'";document.getElementById("search_selected").innerHTML += "            "+text1+"    " + text2 +"    "+ text3+"<br />";};function add(){var obj = document.getElementById("add"); //定位idvar index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中文本var value = obj.options[index].value; // 选中值document.getElementById("search_selected").innerHTML += text+"<br />";document.getElementById("sql").value += " "+value+" ";}</script></head><body><div class="search"><table width="510" border="0" cellspacing="5" cellpadding="1" style="font-size:12px;">  <tr>    <td colspan="4"><div id="search_selected" style="width:490px; height:60px; overflow-y:scroll; background-color:#CFC"><b>已添加条件</b><br /></div></td>  </tr>  <tr>    <td width="80px"><select name="field" id="field">                        <option value="name">姓名</option>                        <option value="age">年龄</option>                        <option value="tel">电话</option>                        <option value="email">EMAIL</option>                        <option value="unit">部门</option>                </select></td>    <td width="80px"><select name="operation" id="operation">                             <option value="LIKE">通配符</option>                        <option value="=">等于</option>                        <option value="!=">不等于</option>                        <option value="IN (...)">包含于</option>                </select></td>    <td width="100px"><input id="field_value" name="field_value" type="text" size="20"/></td>    <td width="250px"><a onclick="insert()"><img src="images/check.png" width="28" height="28" alt="完成" align="middle" /></a>       <a onclick="add()"><img src="images/plus.png" width="30" height="30" alt="关系" align="middle" title="添加查询条件"/></a><select id="add" name="add">                        <option value="AND">与</option>                        <option value="OR">或</option>                        <option value="NOT">非</option>                </select></td>  </tr></table><form action="000.php" method="post"><table width="440"><tr><td align="center"><input name="sql" type="hidden" id="sql" value="select * from user1 where" /><input name="" type="submit" value="查询" /></form></td></tr></table></div></body></html>
0 0