表格元素没有文字

时间:2017-01-11 23:21:25

标签: javascript jquery html subquery sparql

我有一个自动递增的表,它从Sparql查询起作用,它的作用是从用户获取输入并使用dbpedia它返回value在桌子里面。所以我要做的是当用户输入无效输入而不是显示空白<td>的表格时,我希望它显示类似于 - Invalid Entry的警告框。我的鳕鱼在下面:

HTML

 <table id="results">

   <Full name: 
    <br>
    <input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="@ViewBag.DisplayName">
    <br>
    <input id="submit" type="submit" value="Submit">

</table>

脚本

    <script type="text/javascript">
        $('#submit').on('click', function (e) {
            var table = $("#results");
            var url = "http://dbpedia.org/sparql";
            var userInput = $('#userInput').val();
            table.on("click", "td", myFunction);

            var length = $.trim($("#userInput").val()).length;
            if (length == 0) {
                alert("null");
            }
            else {
                $('#userInput').prop('disabled', true);
                var query = [
            "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>",
            "PREFIX type: <http://dbpedia.org/class/yago/>",
            "PREFIX prop: <http://dbpedia.org/property/>",
            "SELECT ?spouse",
            "WHERE {",
                "?dave dbo:spouse dbr:" + userInput + ".",
                "?dave rdfs:label ?spouse.",
              "}",
            "Limit 1"
                ].join(" ");
                alert("this query: [" + query + "]");
                var queryUrl = url + "?query=" + encodeURIComponent(query) + "&format=json";
                console.log(queryUrl);
                $.ajax({
                    dataType: "jsonp",
                    url: queryUrl,
                    success: function (data) {
                        console.log(data);
                        // get the table element
                        var table = $("#results");

                        // get the sparql variables from the 'head' of the data.
                        var headerVars = data.head.vars;

                        // using the vars, make some table headers and add them to the table;
                        var trHeaders = getTableHeaders(headerVars);
                        table.append(trHeaders);

                        // grab the actual results from the data.
                        var bindings = data.results.bindings;

                        // for each result, make a table row and add it to the table.
                        for (rowIdx in bindings) {
                            table.append(getTableRow(headerVars, bindings[rowIdx]));
                        }
                    }
                });
                function getTableRow(headerVars, rowData) {
                    var tr = $("<tr></tr>");
                    for (var i in headerVars) {
                        tr.append(getTableCell(headerVars[i], rowData));
                    }

                    return tr;
                }

                function getTableCell(fieldName, rowData) {
                    var td = $("<td></td>");
                    var fieldData = rowData[fieldName];
                    alert("fieldName = [" + fieldName + "] rowData[fieldName][value] = [" + rowData[fieldName]["value"] + "]");

                    //You need to check id fieldData["value"] is empty and then trigger alert, as if this empty your td will be empty
                    if (fieldData["value"] && fieldData["value"].trim().length !== 0) {
                        td.html(fieldData["value"]);
                        return td;
                    } else {
                        alert("td is empty");
                    }
                    console.log(td);
                }

                function getTableHeaders(headerVars) {
                    var trHeaders = $("<tr></tr>");
                    for (var i in headerVars) {
                        trHeaders.append($("<th>" + headerVars[i] + "</th>"));
                    }
                    return trHeaders;
                }
            }
        });

</script>

SPARQL QUERY

  $('#userInput').prop('disabled', true);
                var query = [
            "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>",
            "PREFIX type: <http://dbpedia.org/class/yago/>",
            "PREFIX prop: <http://dbpedia.org/property/>",
            "SELECT ?spouse",
            "WHERE {",
                "?dave dbo:spouse dbr:" + userInput + ".",
                "?dave rdfs:label ?spouse.",
              "}",
            "Limit 1"
                ].join(" ");

我的尝试

function getTableCell(fieldName, rowData) {
                    var td = $("<td></td>");
                    var fieldData = rowData[fieldName];
                    alert("fieldName = [" + fieldName + "] rowData[fieldName][value] = [" + rowData[fieldName]["value"] + "]");

                    // check id fieldData["value"] is empty and then trigger alert, as if this empty your td will be empty
                    if (fieldData["value"] && fieldData["value"].trim().length !== 0) {
                        td.html(fieldData["value"]);
                        return td;
                    } else {
                        alert("td is empty");
                    }
                    console.log(td);
                }

使用该代码,如果输入的输入无效且没有显示警告框,则只显示空白表。

当table包含空元素时,我该如何显示警告框。很抱歉我从源代码中获取了很长的代码列表,所以不完全理解它。谢谢你的时间。

0 个答案:

没有答案