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

Question

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

if you show us the jQuery equivalent which is working, then we can understand precisely what your code needs to do and reproduce it quite easily. But...have you actually tried to re-write it yet? Here i see code to create the table, but not to handle selecting etc.You can easily research how to handle clicks, how to select elements etc using pure JS already. It should be possible to make an attempt. On this site we prefer to help people, not write the whole solution for them, if possible. We give our time for free, so we expect that you at least tried to do it in your own time first. Thanks. — ADyson
– ADyson, Commented Feb 6, 2019 at 14:20

bas · Accepted Answer · 2019-02-06 14:39:32Z

1

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/

answered Feb 6, 2019 at 14:39

bas

1,13014 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related