[英]how to fill table from javascript
I am new at javascript. 我是javascript新手。 I want to fill my table from apache solr query results when I click on the search button.
当我单击搜索按钮时,我想从apache solr查询结果中填写表格。 I made something like this
我做了这样的事情
<script>
function getDocuments(){
var strSO=document.getElementById("ngramBoxstrSO").value;
var PackName=document.getElementById("ngramBoxPackName").value;
var DocType=document.getElemenById("ngramBoxDocType").value;
SolrJava SJ = new SolrJava();
SolrDocumentList list = SJ.getSolrList(strSO,PackName,DocType);
var table=document.getElementById("example");
var row=table.insertRow(2);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
for (var i = 0; i < list.size(); i++){
cell1.innerHTML=list.get(i).getValue("id");
cell2.innerHTML=list.get(i).getValue("strSO");
cell3.innerHTML=list.get(i).getValue("PackName");
cell4.innerHTML=list.get(i).getValue("DocType");
cell5.innerHTML=list.get(i).getValue("DocName");
var button=document.createElement("button");
button.innerHTML="OPEN";
cell6.appendChild(button);
}
}
</script>
but it doesnt work. 但它不起作用。
When I click the search button, the table shows nothing and the size of the list is the query results data's size. 当我单击搜索按钮时,表什么都不显示,列表的大小就是查询结果数据的大小。
How can I fix my javascript? 如何修复JavaScript? Do you have any idea?
你有什么主意吗?
<label for="strSO">Sales-Order: </label> <input id="ngramBoxstrSO">
<label for="PackName">PackName: </label> <input id="ngramBoxPackName">
<label for="DocType">DocType: </label> <input id="ngramBoxDocType">
<button type="button" onclick="getDocuments()" class="btn btn-sm">SEARCH</button>
It seems like your list
is empty . 您的
list
似乎是空的。 Have a look at the sample . 看一下样本。
function getDocuments() { var list = [ { "Book ID": "1", "Book Name": "Computer Architecture", "Category": "Computers", "Price": "125.60" }, { "Book ID": "2", "Book Name": "Java Complete reference", "Category": "Programming", "Price": "56.00" }, { "Book ID": "3", "Book Name": "Popular Science", "Category": "Science", "Price": "210.40" } ] /// suppose data came from solr result ie your list // EXTRACT VALUE FOR HTML HEADER. // ('Book ID', 'Book Name', 'Category' and 'Price') var col = []; for (var i = 0; i < list.length; i++) { for (var key in list[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } // CREATE DYNAMIC TABLE. var table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. for (var i = 0; i < list.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = list[i][col[j]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("showData"); divContainer.innerHTML = ""; divContainer.appendChild(table); }
td , th , tr{ border:1px solid green; }
<input type="button" onclick="getDocuments()" value="Create Table From Solr" /> <p id="showData"></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.