我有一个自动递增的表,它从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包含空元素时,我该如何显示警告框。很抱歉我从源代码中获取了很长的代码列表,所以不完全理解它。谢谢你的时间。