JavaScript_javascript 기술을 사용하여 SQL 쿼리 양식을 생성하는 방법
이 기사의 예에서는 JavaScript를 사용하여 SQL 쿼리 양식을 생성하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기서 JavaScript는 복잡한 SQL 쿼리 양식을 생성하는 데 사용됩니다. 실행한 후에는 선택한 쿼리 조건에 따라 SQL 문을 자동으로 수정할 수 있습니다.
런닝 효과 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>查询条件表单</title> <style> *{ font-size:12px; padding:0; margin:0; } body{ padding:40px; } #MainBox{ border:#666 1px solid; background-color:#eee; width:700px; } #MainBox td{ padding:4px; } #ConditionBox{ height:150px; width:100%; overflow-y:auto; border:#bbb 1px solid; padding:2px; background-color:#fff; } .tmFrame{ border:#eee 1px solid; padding:2px; width:100%; } .tmFrame_highlight{ border:#666 1px solid; padding:2px; width:100%; background-color:#f7f7f7; } .fname{ float:left; width:200px; } .conn{ float:left; width:100px; } .fvalue{ float:left; width:100px; } .handlebox{ float:right; width:180px; display:none; } .handlebox_view{ float:right; width:180px; display:block; } .rbox{ float:right; margin:1px; background-color:#999; color:#fff; padding:1px; width:15px; cursor:hand; } legend{ border:#bbb 1px solid; padding:4px; } fieldset{ border:#bbb 1px solid; padding:4px; } .sqlwords{ margin:2px; border:#bbb 1px solid; width:100%; } </style> <script> ////构造函数 function ce(e){return document.createElement(e)} /* Example: * var a = cex("DIV", {onmouseover:foo, name:'div1', id:'main'}); */ function cex(e, x){ var a = ce(e); for (prop in x){ a[prop] = x[prop]; } return a; } /* * function ge * Shorthand function for document.getElementById(i) */ function ge(i){return document.getElementById(i)} /* * function ac * Example: ac( house, ac(roof, shingles), ac(floor, ac(tiles, grout))) */ function ac(){ if (ac.arguments.length > 1){ var a = ac.arguments[0]; for (i=1; i<ac.arguments.length; i++){ if (arguments[i]) a.appendChild(ac.arguments[i]); } return a; } else { return null; } } /////ID增量 function guid(){ if (!window.__id) window.__id = 0; return ++window.__id; } //======建立条件类 function term(tname,fname,conn,fvalue,ttype){ this.tname=tname; this.fname=fname; this.conn=conn; this.fvalue=fvalue; this.id= guid(); this.ttype=ttype; } term.prototype.getHTML = function(){ var termFrame = cex("DIV", { id:this.id, className:'tmframe', onmouseover:this.fc_term_onmouseover(), onmouseout:this.fc_term_onmouseout() }); //var module = cex("DIV", { //id:'module'+this.id, //className:'module' //}); var tttt=this.tname+"."+this.fname; if(this.ttype!='fset') tttt=this.tname; var mtt = cex("input", { id:'tp'+this.id, name:'fname'+this.id, type:"hidden", value:this.ttype }); var fname = cex("DIV", { id:'fname'+this.id, className:'fname', innerHTML:tttt }); var conn = cex("DIV", { id:'conn'+this.id, className:'conn', innerHTML:this.conn }); var fvalue = cex("DIV", { id:'fvalue'+this.id, className:'fvalue', innerHTML:this.fvalue }); var handlebox = cex("div", { id:'handlebox'+this.id, className:"handlebox" }); var mdel = cex("div", { id:'tmdel'+this.id, onclick:this.fc_mdel_onclick(), className:"rbox", title:"删除此条件", innerHTML: 'X' }); var mup = cex("div", { id:'tmup'+this.id, onclick:this.fc_mup_onclick(), className:"rbox", title:"向上移动", innerHTML: '↑' }); var mdown = cex("div", { id:'tmdown'+this.id, onclick:this.fc_mdown_onclick(), className:"rbox", title:"向下移动", innerHTML: '↓' }); var mzkh = cex("div", { id:'tzkh'+this.id, onclick:this.fc_mzkh_onclick(), className:"rbox", title:"添加左括号", innerHTML: '(' }); var mykh = cex("div", { id:'tykh'+this.id, onclick:this.fc_mykh_onclick(), className:"rbox", title:"添加右括号", innerHTML: ')' }); var mand = cex("div", { id:'tand'+this.id, onclick:this.fc_mand_onclick(), className:"rbox", title:"添加并条件", innerHTML: 'and' }); var mor = cex("div", { id:'tor'+this.id, onclick:this.fc_mor_onclick(), className:"rbox", title:"添加或条件", innerHTML: 'or' }); // Build DIV ac (termFrame, mtt, ac (handlebox, mdel, mup, mdown, mykh, mzkh, mand, mor ), fname, conn, fvalue ); return termFrame; } term.prototype.highlight = function(){ ge("handlebox"+this.id).className = 'handlebox_view'; ge(this.id).className = 'tmFrame_highlight'; } term.prototype.lowlight = function(){ ge("handlebox"+this.id).className = 'handlebox'; ge(this.id).className = 'tmFrame'; } term.prototype.remove = function(){ var _this = ge(this.id); _this.parentNode.removeChild(_this); } term.prototype.moveup = function(){ var _this = ge(this.id); var pre_this = _this.previousSibling; if(pre_this!=null){ _this.parentNode.insertBefore(_this,pre_this); this.lowlight(); } } term.prototype.movedown = function(){ var _this = ge(this.id); var next_this = _this.nextSibling; if(next_this!=null){ _this.parentNode.insertBefore(next_this,_this); this.lowlight(); } } term.prototype.addzkh = function(){ var _this = ge(this.id); var tzkh = new term('╭----------------','','','','zkh'); var node_zkh = tzkh.getHTML(); _this.parentNode.insertBefore(node_zkh,_this); } term.prototype.addykh = function(){ var _this = ge(this.id); var tykh = new term('╰----------------','','','','ykh'); var node_ykh = tykh.getHTML(); if(_this.nextSibling!=null) _this.parentNode.insertBefore(node_ykh,_this.nextSibling); else _this.parentNode.appendChild(node_ykh); } term.prototype.addand = function(){ var _this = ge(this.id); var tand = new term(' 并且','','','','tand'); var node_and = tand.getHTML(); if(_this.nextSibling!=null) _this.parentNode.insertBefore(node_and,_this.nextSibling); else _this.parentNode.appendChild(node_and); } term.prototype.addor = function(){ var _this = ge(this.id); var tor = new term(' 或者','','','','tor'); var node_or = tor.getHTML(); if(_this.nextSibling!=null) _this.parentNode.insertBefore(node_or,_this.nextSibling); else _this.parentNode.appendChild(node_or); } ///对象控制函数 term.prototype.fc_term_onmouseover = function(){ var _this = this; return function(){ //if (!_this.isDragging) _this.highlight(); } } term.prototype.fc_term_onmouseout = function(){ var _this = this; return function(){ //if (!_this.isDragging) _this.lowlight(); } } term.prototype.fc_mdel_onclick = function(){ var _this = this; return function(){ _this.remove(); } } term.prototype.fc_mup_onclick = function(){ var _this = this; return function(){ _this.moveup(); } } term.prototype.fc_mdown_onclick = function(){ var _this = this; return function(){ _this.movedown(); } } term.prototype.fc_mzkh_onclick = function(){ var _this = this; return function(){ _this.addzkh(); } } term.prototype.fc_mykh_onclick = function(){ var _this = this; return function(){ _this.addykh(); } } term.prototype.fc_mand_onclick = function(){ var _this = this; return function(){ _this.addand(); } } term.prototype.fc_mor_onclick = function(){ var _this = this; return function(){ _this.addor(); } } /////插入页面 function insertterm(){ var tname = document.all.tname.value; var fname = document.all.fname.value; var conn = document.all.conn.value; var fvalue = document.all.fvalue.value; //xl(tname+"|"+fname+"|"+conn+"|"+fvalue); var tm = new term(tname,fname,conn,fvalue,"fset"); var tmHTML = tm.getHTML(); ac(ge("ConditionBox"),tmHTML); //ZA.addterm(tm); addtofrom(tname); } var tt = new Array(); function addtofrom(tname){ var ttexit="no"; for(var i=0;i<tt.length;i++){ if(tt[i]==tname) ttexit="yes"; } if(ttexit=="no"){ tt[i]=tname; //alert(tt[i]); } } //====条件控制窗口函数 function CBadd(){ var h = document.all.ConditionBox.offsetHeight; document.all.ConditionBox.style.height = h + 20 + "px"; } function CBcut(){ var h = document.all.ConditionBox.offsetHeight; if(h>=150) document.all.ConditionBox.style.height = h - 20 + "px"; else return false; } function getSQL(){ var sql=""; var ma = ge("ConditionBox").childNodes; for(i=0;i<ma.length;i++){ var id = ma[i].getAttribute("id"); var tp = ge("tp"+id).value; if(tp=="fset"){ //sql+=" "+ge("fname"+id).innerHTML; //sql+=" "+ge("conn"+id).innerHTML; //sql+=" \""+ge("fvalue"+id).innerHTML+"\""; var fname=ge("fname"+id).innerHTML; var conn=ge("conn"+id).innerHTML; var fvalue=ge("fvalue"+id).innerHTML; sql+=" "+fname; if(conn=="等于") sql+=" = "+"\'"+fvalue+"\'"; if(conn=="大于") sql+=" > "+"\'"+fvalue+"\'"; if(conn=="小于") sql+=" < "+"\'"+fvalue+"\'"; if(conn=="不等于") sql+=" <> "+"\'"+fvalue+"\'"; if(conn=="为空") sql+=" is null "; if(conn=="不为空") sql+=" is not null "; if(conn=="包含") sql+=" like \'%"+fvalue+"%\'"; } else{ //sql+=" "+ge("fname"+id).innerHTML; if(tp=="zkh") sql+=" ("; if(tp=="ykh") sql+=" )"; if(tp=="tand") sql+=" and"; if(tp=="tor") sql+=" or"; } //var mn = ma.childNodes; } var ffrom = "FROM "+getFrom(); ge("sqlwords").value ="Select * "+ ffrom+" Where "+sql; } function getFrom(){ var ff=tt.toString(); return ff; } </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="MainBox"> <tr> <td colspan="2" style="background-color:#999;color:#000;font-weight:bolder;font-size:14px">复杂查询表单</td> </tr> <tr> <td><div id="ConditionBox"></div> <div style="width:100%"><SPAN title='放大显示框' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBadd()'>6</SPAN><SPAN title='缩小显示' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBcut()'>5</SPAN></div></td> </tr> <tr> <td> <fieldset> <legend>SQL表达式</legend> <input type="text" id="sqlwords" class="sqlwords" /><input type="submit" name="Submit" value="GET SQL" onclick="getSQL()" style="float:right"/> </fieldset> </td> </tr> <tr> <td> <fieldset> <legend>定义条件</legend> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>表</td> <td><select name="tname" id="tname"> <option value="table1" selected="selected">表1</option> <option value="table2">表2</option> <option value="table3">表3</option> <option value="table4">表4</option> <option value="table5">表5</option> </select></td> <td>字段</td> <td><select name="fname" id="fname"> <option value="f1">字段1</option> <option value="f2">字段2</option> <option value="f3">字段3</option> <option value="f4">字段4</option> <option value="f5">字段5</option> <option value="f6">字段6</option> <option value="f7">字段7</option> </select></td> <td>关系</td> <td><select name="conn" id="conn"> <option value="大于">大于</option> <option value="等于">等于</option> <option value="小于">小于</option> <option value="不等于">不等于</option> <option value="为空">为空</option> <option value="不为空">不为空</option> <option value="包含">包含</option> </select></td> <td>值</td> <td><input name="fvalue" type="text" id="fvalue" value="111111" /></td> <td><input type="submit" name="Submit" value="增加新条件" onclick="insertterm()"/></td> </tr> </table> </fieldset> </td> </tr> </table> </body> </html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

기술의 발달로 전자 문서는 우리의 일상 업무와 학습에 없어서는 안될 부분이 되었습니다. 전자 문서, 특히 긴 기사나 논문을 편집할 때 목차 생성은 매우 중요한 단계입니다. 목차를 사용하면 독자가 기사의 내용과 구조를 더 쉽게 찾을 수 있고 읽기 효율성을 높일 수 있습니다. 그러나 때때로 카탈로그 생성 과정에서 카탈로그 생성 오류, 순서 혼란 등 몇 가지 문제가 발생할 수 있습니다. 그렇다면 디렉토리라는 단어가 잘못 생성된 경우 어떻게 해결해야 할까요? 머리

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
