Блог

Главная - Вопросы по программированию - как заполнить таблицу из javascript

как заполнить таблицу из javascript

#javascript #solr

#javascript #solr

Вопрос:

Я новичок в javascript. Я хочу заполнить свою таблицу из результатов запроса apache solr, когда нажимаю на кнопку поиска. Я сделал что-то вроде этого

 <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>

но это не работает.

Когда я нажимаю кнопку поиска, таблица ничего не показывает, а размер списка соответствует размеру данных результатов запроса.

Как я могу исправить свой javascript? У вас есть какие-нибудь идеи?

 <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>

Комментарии:

1. что такое not working каков размер list

2. @manikantgautam когда я нажимаю кнопку поиска, таблица ничего не показывает. а размер списка — это размер результатов запроса данных

Ответ №1:

Кажется, что ваш list пуст. Взгляните на образец .

 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 i.e 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>

Комментарии:

1. я думаю, что список не пуст, потому что, когда я запускаю таблицу без результатов нажатия кнопки, но когда я запускаю функцию onclick кнопки, она работает плохо: (

2. @MustafaBerkanDemir замените этот фрагмент кода на свой.