從html表中選擇一行，然后使用沒有jQuery的javascript選擇多行

Question

我正在嘗試選擇多個表行，我想使用Javascript在下面顯示選定的表行

我已經使用過Jquery了，但是我在代碼中使用的是Angularjs。 請幫助我任何人如何使用Javascript

這是我的HTML代碼：

<div id="container" ng-controller="categoryPanelController" ng-init="init()" style="display: inherit;">

<div class="col-3 col-s-3 main">
    <div class="sr">
        <strong>SEARCH RESOURCE</strong>
    </div>

    <h5 class="project">Project Manager Name</h5><input class="dropdown" type="text" />
    <h5 class="resource">Request Type</h5>
    <select id="dropdown1" class="dropdown">
        <option class="dropdown" value=""></option>
        <option class="dropdown" value=" "> </option>
        <option class="dropdown" value=" "> </option>
    </select>
    <h5 class="equipment">Equipment</h5>
    <select id="dropdown2" class="dropdown">
        <option class="dropdown" value=""></option>
        <option class="dropdown" value=""></option>
        <option class="dropdown" value=" "> </option>
    </select>
    <h5 class="tp">Time Period</h5> <input class="dropdown" type="text" />

    <h5 class="location">Location</h5><input class="dropdown" type="text" />
    <h5 class="priority">Priority</h5><input class="dropdown" type="text" />
    <h5 class="rp">ReasonForPriority</h5><input class="dropdown" type="text" />

    <div class="clear"></div>
    <div class="bs">

        <input type="button" value="Search" id="myBtn" class="submit" style="height: 2.5em;">
    </div>
</div>
<div class="clear"></div>

<div class="col-9 col-s-9" style="width: 75%; margin-top: -1em !important;">
    <div id="customers">

        <div class="clear">

        </div>

        <div id="resultTable">

        </div>
    </div>
</div>

這是我的JS代碼：

function buildTable(data) {
var table = document.createElement("table");
table.className = "gridtable";
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var headRow = document.createElement("tr");
["Project Manager Name", "Request Type", "Equipment", "Time Period", "Location", "priority", "Reason For Priority"].forEach(function(el) {
    var th = document.createElement("th");
    th.appendChild(document.createTextNode(el));
    headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);

for (var knx in data)
{
    var tr = document.createElement("tr");
    if (data.hasOwnProperty(knx))
    {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(data[knx]))
        tr.appendChild(td);
    }

    tbody.appendChild(tr);
}

data.forEach(function(el) {
    var tr = document.createElement("tr");
    for (var o in el) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(el[o]))
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
});

table.appendChild(tbody);
return table;

}

請任何人幫助我。 提前致謝

Answer 1

為什么您嘗試使用純JavaScript而不是AngularJs解決它？ 為此，它具有許多有用的功能。 例如，創建表就像僅在控制器中設置數據並具有類似以下模板的操作一樣容易：

<table>
  <thead>
  <tr><th>Project Manager Name</th><th>Request Type</th> ... </tr> 
  </thead>
  <tr ng-repeat="knx in data">
    <td>{{ data[knx] }}</td>
  </tr>
</table>

對於AngularJS中已具有您可能需要的大多數功能的表，我建議http://lorenzofox3.github.io/smart-table-website/