javascript - 动态查询生成器

Question

我正在创建自定义 MySQL 数据库查询 UI。在这个 UI 中，我有一个查询生成器界面，我想根据用户选择动态附加查询属性，以创建动态查询。请参阅下图以获得视觉描述

从上图中，我想在 FROM 之后附加 CHARACTER_SET ，并在从表中选择 ALL 时附加为星号，依此类推，键是位置我放置生成的变量的位置。

如何使用 JQuery 实现此目的？

我的 JavaScript

Selecting a Table

$(document).on("change", ".tbl_list", function () {
    var tbls = new Array();
    $("input:checkbox[name='tbl[]']:checked").each(function () {
        tbls.push($(this).val());
    });
    var tbl = tbls.join('|');
    var db = window.sessionStorage.getItem("db");
    $.ajax({
        type: "POST",
        url: "ajax2.php",
        data: {
            tbl: tbl,
            db: db
        },
        success: function (html) {
            console.log(html);
            $("#tblField").html(html).show();
        }
    });
});

Selecting All option

  $(document).on("click", ".tblall", function () {
        if (this.checked) {
            // Iterate each checkbox
            $('.tblst').each(function () {
                this.checked = true;
            });
        } else {
            $('.tblst').each(function () {
                this.checked = false;
            });
        }
    });

编辑

As requested HTML for my DIVs

表格选择器

while ( $row = mysqli_fetch_array ( $tbl_list ) ) {
        ?>
        <input type="checkbox" name="tbl[]" class="tbl_list"
    value="<?php echo   $row [0];   ?>" />
 <?php echo $row [0]; ?> 
<br>

查询生成器

<div id="qryDisplay">
            <fieldset>
                <legend> Query Builder</legend>
                <div id="qryView">
                    <p>SELECT   FROM</p>
                </div>
            </fieldset>
        </div>

What I have tried so far

使用.append 我可以将数据添加到段落末尾，因此这对于我的表名称来说是理想的选择。然而它是一个函数，我不确定如何将下面的代码实现到我的选择表函数中。

$("#qryView > p").append("  " tblName);

Answer 1

无论如何，不​​考虑选择多个表背后的逻辑，我的方法是将选择存储在隐藏输入字段中，并在最后从隐藏字段构造查询。

<input type="hidden" value="" name="hiddenTables" id="hiddenTables" />

根据上面函数中的选择填充字段:

$("input:checkbox[name='tbl[]']:checked").each(function () {
    tbls.push($(this).val());
    if($('#hiddenTables').val() == ""){ 
       $('#hiddenTables').val($(this).val()); 
    }else{
       $('#hiddenTables').val($('#hiddenTables').val()+','+$(this).val());
    }
});

最后创建您的查询:

// hidden field for field selection, same as above.
var fieldselection = '*';
if($('#hiddenFieldselection').val() != ""){
    fieldselection = $('#hiddenFieldselection').val();
}

$("#qryView > p").html("SELECT " + fieldselection + " FROM " + $('#hiddenTables').val()); 

当然，这需要根据您需要的方式进行调整，我还没有测试过任何这些......所以这取决于您:-)