JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<table border="1" class="fovtable"><caption></caption></table>
<button id="get-query-string" type="button">Get Query String</button>

JavaScript

(function ($) {

    $.fn.fovtable = function (config) {
        var table = this;

        if (config && typeof (config) == 'string') {
            switch (config) {
                case 'query':
                    return queryString();
                    break;
            }
            return;
        }

        function queryString() {
            var query = [];
            table.find('tr.rule').each(function (key, tr) {
                var logic = (key > 0) ? $(tr).find('td.logic').find('.selector').val() : '';
                var field = $(tr).find('td.field').find('.selector').val();
                var op = $(tr).find('td.operator').find('.selector').val();
                var val = $(tr).find('td.value').find('.inputer').val();
                var rule = [logic, field, op, val];
                if (val != '') {
                    query[key] = rule.join(' ');
                }
            });

            if (query.length) {
                return query.join(' ').replace(/^\s+/, "");
            } else {
                return '';
            }
        }


        //類型可用運算子
        var typeOperators = {
            string: {
                like: "包含",
                unlike: "不包含",
                eq: "等於"
            },
            number: {
                eq: "等於",
                gt: "小於",
                lt: "大於",
                ge: "以上",
                le: "以下",
                bt: "之間"
            },
            datetime: {
                eq: "在",
                gt: "之後",
                lt: "之前",
                ge: "之後(包含)",
                le: "之前(包含)",
                bt: "之間"
            },
            menu: {
                eq: "等於"
            }
        };

        //建立各類型的下拉選擇器
        var typeSelector = {};
        for (var type in typeOperators) {
            typeSelector[type] = $('<select class="selector">');
            for (var operator in typeOperators[type]) {
                var label = typeOperators[type][operator];
    ...