CODEWITHSUNDEEP
javascripthtml
sowjanya
sowjanya

Reputation: 11

Select a row from html table and select multiple rows using javascript without jquery

I am trying to select multiple table rows and i want to display selected table rows below using Javascript

I did already using Jquery its working fine but in my code i am using Angularjs. Please help me any one how can i achive using Javascript

This is my HTML Code:

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

This is my JS code:

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;

}

Please help me any one. Thanks in advance

Upvotes: 0

Views: 1658

Answers (1)

bas
bas

Reputation: 1070

Why do you try to solve it with plain JavaScript and not with AngularJs? That has so many helpful functions for exactly this. Creating a table for example would be as easy as only setting the data in your controller and having a template like:

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

For a table in AngularJS which has already most of the functionality that you will probably need I would recommend http://lorenzofox3.github.io/smart-table-website/

Upvotes: 1

Related Questions