jQuery MS SQL和MySQL查询生成器

  • 源码大小:9.17KB
  • 所需积分:1积分
  • 源码编号:19JP-3574
  • 浏览次数:853次
  • 最后更新:2023年06月28日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

生成SQL查询可能很麻烦,但多亏了这个免费的在线工具,现在你可以在几秒钟内完成。

这是一个JavaScript驱动的在线SQL查询生成器,可以帮助您轻松生成SQL查询,以便选择并将数据插入所有主要的关系数据库-MySql和MS SQL Server。

其想法是提供一种生成常见查询的工具,使没有编写复杂SQL查询经验的开发人员更容易从数据中获得所需内容,而无需进行大量的研究和测试。

支持的SQL查询:

  • 选择
  • 插入
  • 使现代化
  • 删去
  • 创建
  • 重命名
  • 下降

如何使用它:

1.在页面中插入以下HTML代码段。

  1. <form action="#" class="mt-3">
  2. <div class="mb-4">
  3. <h5 for="query-type" class="form-label">Query Type</h5>
  4. <select class="form-select" id="query-type" name="query-type" required>
  5. <option value="" selected class="bg-dark text-white">Select query</option>
  6. <option value="select_div" class="bg-sel">SELECT</option>
  7. <option value="insert_div" class="bg-sel">INSERT</option>
  8. <option value="update_div" class="bg-sel">UPDATE</option>
  9. <option value="delete_div" class="bg-sel">DELETE</option>
  10. <option disabled value="" class="bg-dark"></option>
  11. <option value="create_db_div" class="bg-sel">CREATE DATABASE</option>
  12. <option value="rename_db_div" class="bg-sel">RENAME DATABASE</option>
  13. <option value="drop_db_div" class="bg-sel">DROP DATABASE</option>
  14. <option disabled value="" class="bg-dark"></option>
  15. <option value="create_tbl_div" class="bg-sel">CREATE TABLE</option>
  16. <option value="rename_tbl_div" class="bg-sel">RENAME TABLE</option>
  17. <option value="drop_tbl_div" class="bg-sel">DROP TABLE</option>
  18. </select>
  19. </div>
  20. <div class="mb-3">
  21. <div class="row bg-sel p-3 rounded border border-dark" id="select_div" style="display: none;">
  22. <div class="col-12">
  23. <p class="fw-bold">
  24. Enter Query Information
  25. </p>
  26. </div>
  27. <div class="col-3 col-sm-2 col-md-1 mb-1">
  28. <label class="form-label">SELECT</label>
  29. </div>
  30. <div class="col-3 col-sm-4 col-md-2 mb-1">
  31. <input type="text" class="form-control q-input" data-q-type="select" placeholder="[field names]" id="sel-field-names" name="sel-field-names" />
  32. </div>
  33. <div class="col-3 col-sm-2 col-md-1 mb-1">
  34. <label class="form-label">FROM</label>
  35. </div>
  36. <div class="col-3 col-sm-4 col-md-2 mb-1">
  37. <input type="text" class="form-control q-input" data-q-type="select" placeholder="[table name]" id="sel-table-name" name="sel-table-name" />
  38. </div>
  39. <div class="col-3 col-sm-2 col-md-1 mb-1">
  40. <label class="form-label">WHERE</label>
  41. </div>
  42. <div class="col-3 col-sm-4 col-md-2 mb-1">
  43. <input type="text" class="form-control q-input" data-q-type="select" placeholder="[where clause]" id="sel-where-clause" name="sel-where-clause" />
  44. </div>
  45. <div class="col-12 mt-3">
  46. <ul class="small">
  47. <li>[field names] as comma separated values</li>
  48. </ul>
  49. </div>
  50. <div class="col-12 mt-3">
  51. <p>
  52. <a class="text-primary" data-bs-toggle="collapse" href="#selectSample" role="button" aria-expanded="false" aria-controls="selectSample">
  53. View Sample
  54. </a>
  55. </p>
  56. <div class="collapse" id="selectSample">
  57. <div class="card card-body text-danger code-sample small">
  58. <div class="row">
  59. <div class="col-10">
  60. <span id="select-query">SELECT Name, Age FROM Customers WHERE Gender = 'M';</span>
  61. </div>
  62. <div class="col-2">
  63. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#select-query"></i>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="row bg-sel p-3 rounded border border-dark" id="insert_div" style="display: none;">
  71. <div class="col-12">
  72. <p class="fw-bold">
  73. Enter Query Information
  74. </p>
  75. </div>
  76. <div class="col-3 col-sm-3 col-md-2 mb-1">
  77. <label class="form-label f-right">INSERT INTO</label>
  78. </div>
  79. <div class="col-3 col-sm-4 col-md-2 mb-1">
  80. <input type="text" class="form-control q-input" data-q-type="insert" placeholder="[table name]" id="ins-table-name" name="ins-table-name" />
  81. </div>
  82. <div class="col-3 col-sm-4 col-md-3 mb-1">
  83. <label class="visually-hidden" for="autoSizingInputGroup"></label>
  84. <div class="input-group">
  85. <div class="input-group-text">(</div>
  86. <input type="text" class="form-control q-input" data-q-type="insert" placeholder="[field names]" id="ins-field-names" name="ins-field-names" />
  87. <div class="input-group-text">)</div>
  88. </div>
  89. </div>
  90. <div class="col-3 col-sm-3 col-md-1 mb-1">
  91. <label class="form-label">VALUES</label>
  92. </div>
  93. <div class="col-3 col-sm-4 col-md-2 mb-1">
  94. <input type="text" class="form-control q-input" data-q-type="insert" placeholder="[field values]" id="ins-values" name="ins-values" />
  95. </div>
  96. <div class="col-12 mt-3">
  97. <ul class="small">
  98. <li>[field names] & [field values] as comma separated values</li>
  99. </ul>
  100. </div>
  101. <div class="col-12 mt-3">
  102. <p>
  103. <a class="text-primary" data-bs-toggle="collapse" href="#insertSample" role="button" aria-expanded="false" aria-controls="selectSample">
  104. View Sample
  105. </a>
  106. </p>
  107. <div class="collapse" id="insertSample">
  108. <div class="card card-body text-danger code-sample small">
  109. <div class="row">
  110. <div class="col-10">
  111. <span id="insert-query">
  112. INSERT INTO Customers (Name, Country, Address) <br/>
  113. VALUES ('Lai Kassama', 'The Gambia', 'Brusubi Phase II');
  114. </span>
  115. </div>
  116. <div class="col-2">
  117. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#insert-query"></i>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="row bg-sel p-3 rounded border border-dark" id="update_div" style="display: none;">
  125. <div class="col-12">
  126. <p class="fw-bold">
  127. Enter Query Information
  128. </p>
  129. </div>
  130. <div class="col-3 col-sm-3 col-md-2 mb-1">
  131. <label class="form-label f-right">UPDATE</label>
  132. </div>
  133. <div class="col-3 col-sm-4 col-md-2 mb-1">
  134. <input type="text" class="form-control q-input" data-q-type="update" placeholder="[table name]" id="upd-table-name" name="upd-table-name" />
  135. </div>
  136. <div class="col-3 col-sm-3 col-md-1 mb-1">
  137. <label class="form-label">SET</label>
  138. </div>
  139. <div class="col-3 col-sm-4 col-md-2 mb-1">
  140. <input type="text" class="form-control q-input" data-q-type="update" placeholder="[names & values]" id="upd-names-values" name="upd-names-values" />
  141. </div>
  142. <div class="col-3 col-sm-3 col-md-1 mb-1">
  143. <label class="form-label">WHERE</label>
  144. </div>
  145. <div class="col-3 col-sm-4 col-md-2 mb-1">
  146. <input type="text" class="form-control q-input" data-q-type="update" placeholder="[where clause]" id="upd-where-clause" name="upd-where-clause" />
  147. </div>
  148. <div class="col-12 mt-3">
  149. <ul class="small">
  150. <li>[names & values] as comma separated values</li>
  151. </ul>
  152. </div>
  153. <div class="col-12 mt-3">
  154. <p>
  155. <a class="text-primary" data-bs-toggle="collapse" href="#updateSample" role="button" aria-expanded="false" aria-controls="selectSample">
  156. View Sample
  157. </a>
  158. </p>
  159. <div class="collapse" id="updateSample">
  160. <div class="card card-body text-danger code-sample small">
  161. <div class="row">
  162. <div class="col-10">
  163. <span id="update-query">
  164. UPDATE Customers<br/>
  165. SET Name = 'Lai Kasman', City= 'Serrekunda'<br/>
  166. WHERE ID = 1;
  167. </span>
  168. </div>
  169. <div class="col-2">
  170. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#update-query"></i>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. <div class="row bg-sel p-3 rounded border border-dark" id="delete_div" style="display: none;">
  178. <div class="col-12">
  179. <p class="fw-bold">
  180. Enter Query Information
  181. </p>
  182. </div>
  183. <div class="col-3 col-sm-3 col-md-2 mb-1">
  184. <label class="form-label f-right">DELETE FROM</label>
  185. </div>
  186. <div class="col-3 col-sm-4 col-md-2 mb-1">
  187. <input type="text" class="form-control q-input" data-q-type="delete" placeholder="[table name]" id="del-table-name" name="del-table-name" />
  188. </div>
  189. <div class="col-3 col-sm-3 col-md-1 mb-1">
  190. <label class="form-label">WHERE</label>
  191. </div>
  192. <div class="col-3 col-sm-4 col-md-2 mb-1">
  193. <input type="text" class="form-control q-input" data-q-type="delete" placeholder="[where clause]" id="del-where-clause" name="del-where-clause" />
  194. </div>
  195. <div class="col-12 mt-3">
  196. <p>
  197. <a class="text-primary" data-bs-toggle="collapse" href="#deleteSample" role="button" aria-expanded="false" aria-controls="selectSample">
  198. View Sample
  199. </a>
  200. </p>
  201. <div class="collapse" id="deleteSample">
  202. <div class="card card-body text-danger code-sample small">
  203. <div class="row">
  204. <div class="col-10">
  205. <span id="delete-query">DELETE FROM Users WHERE ID = 4;</span>
  206. </div>
  207. <div class="col-2">
  208. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#delete-query"></i>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <div class="row bg-sel p-3 rounded border border-dark" id="create_db_div" style="display: none;">
  216. <div class="col-12">
  217. <p class="fw-bold">
  218. Enter Query Information
  219. </p>
  220. </div>
  221. <div class="col-3 col-sm-3 col-md-2 mb-1">
  222. <label class="form-label f-right">CREATE DATABASE</label>
  223. </div>
  224. <div class="col-3 col-sm-4 col-md-2 mb-1">
  225. <input type="text" class="form-control q-input" data-q-type="create_db" placeholder="[database name]" id="cdb-database-name" name="cdb-database-name" />
  226. </div>
  227. <div class="col-12 mt-3">
  228. <p>
  229. <a class="text-primary" data-bs-toggle="collapse" href="#createDBSample" role="button" aria-expanded="false" aria-controls="selectSample">
  230. View Sample
  231. </a>
  232. </p>
  233. <div class="collapse" id="createDBSample">
  234. <div class="card card-body text-danger code-sample small">
  235. <div class="row">
  236. <div class="col-10">
  237. <span id="create-db-query">
  238. CREATE DATABASE Records;
  239. </span>
  240. </div>
  241. <div class="col-2">
  242. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#create-db-query"></i>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="row bg-sel p-3 rounded border border-dark" id="rename_db_div" style="display: none;">
  250. <div class="col-12">
  251. <p class="fw-bold">
  252. Enter Query Information
  253. </p>
  254. </div>
  255. <div class="col-3 col-sm-3 col-md-2 mb-1">
  256. <label class="form-label f-right">ALTER DATABASE</label>
  257. </div>
  258. <div class="col-3 col-sm-4 col-md-2 mb-1">
  259. <input type="text" class="form-control q-input" data-q-type="rename_db" placeholder="[current database name]" id="rdb-database-name" name="rdb-database-name" />
  260. </div>
  261. <div class="col-3 col-sm-3 col-md-2 mb-1">
  262. <label class="form-label f-right">MODIFY NAME =</label>
  263. </div>
  264. <div class="col-3 col-sm-4 col-md-2 mb-1">
  265. <input type="text" class="form-control q-input" data-q-type="rename_db" placeholder="[new database name]" id="rdb-new-database-name" name="rdb-new-database-name" />
  266. </div>
  267. <div class="col-12 mt-3">
  268. <p>
  269. <a class="text-primary" data-bs-toggle="collapse" href="#alterDBSample" role="button" aria-expanded="false" aria-controls="selectSample">
  270. View Sample
  271. </a>
  272. </p>
  273. <div class="collapse" id="alterDBSample">
  274. <div class="card card-body text-danger code-sample small">
  275. <div class="row">
  276. <div class="col-10">
  277. <span id="alter-db-query">
  278. ALTER DATABASE Account MODIFY NAME = Accounts;
  279. </span>
  280. </div>
  281. <div class="col-2">
  282. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#alter-db-query"></i>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. <div class="row bg-sel p-3 rounded border border-dark" id="drop_db_div" style="display: none;">
  290. <div class="col-12">
  291. <p class="fw-bold">
  292. Enter Query Information
  293. </p>
  294. </div>
  295. <div class="col-3 col-sm-3 col-md-2 mb-1">
  296. <label class="form-label f-right">DROP DATABASE</label>
  297. </div>
  298. <div class="col-3 col-sm-4 col-md-2 mb-1">
  299. <input type="text" class="form-control q-input" data-q-type="drop_db" placeholder="[database name]" id="ddb-database-name" name="ddb-database-name" />
  300. </div>
  301. <div class="col-12 mt-3">
  302. <p>
  303. <a class="text-primary" data-bs-toggle="collapse" href="#dropDBSample" role="button" aria-expanded="false" aria-controls="selectSample">
  304. View Sample
  305. </a>
  306. </p>
  307. <div class="collapse" id="dropDBSample">
  308. <div class="card card-body text-danger code-sample small">
  309. <div class="row">
  310. <div class="col-10">
  311. <span id="drop-db-query">DROP DATABASE Students;</span>
  312. </div>
  313. <div class="col-2">
  314. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#drop-db-query"></i>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. <div class="row bg-sel p-3 rounded border border-dark" id="create_tbl_div" style="display: none;">
  322. <div class="col-12">
  323. <p class="fw-bold">
  324. Enter Query Information
  325. </p>
  326. </div>
  327. <div class="col-3 col-sm-3 col-md-2 mb-1">
  328. <label class="form-label f-right">CREATE TABLE</label>
  329. </div>
  330. <div class="col-3 col-sm-4 col-md-2 mb-1">
  331. <input type="text" class="form-control q-input" data-q-type="create_tbl" placeholder="[table name]" id="ctbl-table-name" name="ctbl-table-name" />
  332. </div>
  333. <div class="col-3 col-sm-7 col-md-8 mb-1">
  334. <label class="visually-hidden" for="autoSizingInputGroup"></label>
  335. <div class="input-group">
  336. <div class="input-group-text">(</div>
  337. <input type="text" class="form-control q-input" data-q-type="create_tbl" placeholder="[columns & datatype]" id="ctbl-column-datatypes" name="ctbl-column-datatypes" />
  338. <div class="input-group-text">)</div>
  339. </div>
  340. </div>
  341. <div class="col-12 mt-3">
  342. <ul class="small">
  343. <li>[columns & datatype] as comma separated values</li>
  344. </ul>
  345. </div>
  346. <div class="col-12 mt-3">
  347. <p>
  348. <a class="text-primary" data-bs-toggle="collapse" href="#createTBLSample" role="button" aria-expanded="false" aria-controls="selectSample">
  349. View Sample
  350. </a>
  351. </p>
  352. <div class="collapse" id="createTBLSample">
  353. <div class="card card-body text-danger code-sample small">
  354. <div class="row">
  355. <div class="col-10">
  356. <span id="create-tbl-query">
  357. CREATE TABLE Students (<br/>
  358. Name TEXT NOT NULL,<br/>
  359. Gender TEXT NOT NULL<br/>
  360. );
  361. </span>
  362. </div>
  363. <div class="col-2">
  364. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#create-tbl-query"></i>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. </div>
  371. <div class="row bg-sel p-3 rounded border border-dark" id="rename_tbl_div" style="display: none;">
  372. <div class="col-12">
  373. <p class="fw-bold">
  374. Enter Query Information
  375. </p>
  376. </div>
  377. <div class="col-3 col-sm-3 col-md-2 mb-1">
  378. <label class="form-label f-right">EXEC SP_RENAME</label>
  379. </div>
  380. <div class="col-3 col-sm-4 col-md-3 mb-1">
  381. <input type="text" class="form-control q-input" data-q-type="rename_tbl" placeholder="[current table name]" id="rtbl-table-name" name="rtbl-table-name" />
  382. </div>
  383. <div class="col-3 col-sm-4 col-md-3 mb-1">
  384. <input type="text" class="form-control q-input" data-q-type="rename_tbl" placeholder="[new table name]" id="rtbl-new-table-name" name="rtbl-new-table-name" />
  385. </div>
  386. <div class="col-12 mt-3">
  387. <p>
  388. <a class="text-primary" data-bs-toggle="collapse" href="#renameTBLSample" role="button" aria-expanded="false" aria-controls="renameTBLSample">
  389. View Sample
  390. </a>
  391. </p>
  392. <div class="collapse" id="renameTBLSample">
  393. <div class="card card-body text-danger code-sample small">
  394. <div class="row">
  395. <div class="col-10">
  396. <span id="rename-tbl-query">EXEC SP_RENAME 'Product','Products';</span>
  397. </div>
  398. <div class="col-2">
  399. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#rename-tbl-query"></i>
  400. </div>
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <div class="row bg-sel p-3 rounded border border-dark" id="drop_tbl_div" style="display: none;">
  407. <div class="col-12">
  408. <p class="fw-bold">
  409. Enter Query Information
  410. </p>
  411. </div>
  412. <div class="col-3 col-sm-3 col-md-2 mb-1">
  413. <label class="form-label f-right">DROP TABLE</label>
  414. </div>
  415. <div class="col-3 col-sm-4 col-md-2 mb-1">
  416. <input type="text" class="form-control q-input" data-q-type="drop_tbl" placeholder="[table name]" id="dtbl-table-name" name="dtbl-table-name" />
  417. </div>
  418. <div class="col-12 mt-3">
  419. <p>
  420. <a class="text-primary" data-bs-toggle="collapse" href="#dropTBLSample" role="button" aria-expanded="false" aria-controls="selectSample">
  421. View Sample
  422. </a>
  423. </p>
  424. <div class="collapse" id="dropTBLSample">
  425. <div class="card card-body text-danger code-sample small">
  426. <div class="row">
  427. <div class="col-10">
  428. <span id="drop-tbl-query">DROP TABLE Users;</span>
  429. </div>
  430. <div class="col-2">
  431. <i class="fas fa-copy float-end copy-btn text-primary" data-clipboard-target="#drop-tbl-query"></i>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. <div class="mb-1 mt-3">
  440. <div class="mb-3">
  441. <h5 for="sql_output">
  442. MS SQL Query Output
  443. <a href="#" class="btn btn-dark float-end copy-btn" data-clipboard-target="#sql-output">
  444. <i class="fas fa-copy"></i> Copy
  445. </a>
  446. </h5>
  447. </div>
  448. <div class="query-output rounded fw-bold" id="sql-output" name="sql-output"></div>
  449. </div>
  450. <div class="mb-3 mt-3">
  451. <div class="mb-3">
  452. <h5 for="mysql_output">
  453. MySQL Query Output
  454. <a href="#" class="btn btn-dark float-end copy-btn" data-clipboard-target="#mysql-output">
  455. <i class="fas fa-copy"></i> Copy
  456. </a>
  457. </h5>
  458. </div>
  459. <div class="query-output rounded fw-bold" id="mysql-output" name="mysql-output"></div>
  460. </div>
  461. </form>

2.在文档中加载最新的jQuery库和Bootstrap框架(可选)。

  1. <link href="./assets/css/style.css" rel="stylesheet" />
  2. <script src="./assets/js/script.js"></script>

3.启用“复制到剪贴板”功能。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  1. var clipboard = new ClipboardJS('.copy-btn');

预览截图