Develop Reference

Create Checkbox on table with JavaScript

I'm building an app and on this app I have to add items on a table, and I would like to add a checkbox on each line that I add, but I'm having troubles on trying to do that.
Would you know how to add a checkbox on each line that I add on the table?
below is the code where I add line per line to my table
function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects
data.forEach((d, i) => {
var tr = nl.insertRow(i);
Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML
var cell = tr.insertCell(j);
cell.innerHTML = d[k]; // Assign object values to cells
});
nl.appendChild(tr);
})
}
I tried to do something like
tr.append("<td> <div class='form-control'>\
<input type='checkbox' /> \
<label for='chk'/>select</div>\
</td>");
But that just adds a text to my table and not the checkbox itself.
<div id="table-wrapper" class="table-responsive">
<table class="table table-hover" id="PartData">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">FUNÇÃO</th>
<th scope="col">DESCRIÇÃO</th>
<th scope="col">QUANTIDADE</th>
<th scope="col">FABRICANTE DO PAINEL</th>
<th scope="col">PEÇA</th>
<th scope="col">REVISÃO</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
above is my HTML code.
Thanks in advance!

As Teemu said in the comments, the solution was
"Create the cell in the loop like you've created the other cells. Then, instead of append, use insertAdjacentHTML to add the HTML for the button. Notice, that this has to be done after setting innerHTML, otherwise the said property overrides everything what was in the cell."
So that's my final function:
function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects
data.forEach((d, i) => {
var tr = nl.insertRow(i);
//cell2.type = checkbox;
Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML
console.log(j)
var cell = tr.insertCell(j);
cell.innerHTML = d[k]; // Assign object values to cells
});
tr.insertAdjacentHTML('beforeEnd', "<td> <div class='form-control'>\
<input id = 'deleteChck' type='checkbox' /> \
<label for='chk'/>Delete</div>\
</td>");
nl.appendChild(tr);
})
}
And it works

How can I make rowspan using javascript for my table which has data from sql in Zend Framework

Output
What I want is in this case there are 2 times Demo is being printed, if this column has same name then it should be rowspan. My data is bein fetched from sql and I have displayed on webpage using populate method and forEach(). This is my code.
function populateSubjectData(subjectDetail){
let table = `<form id="addExamSubjectForm" method="POST" enctype="multipart/form-data" action="javascript:;" autocomplete="off">
<table class="table table-bordered" id="addExamSubject">`;
let header = `<tr>
<th>Sr. No.</th>
<th>Subject Name</th>
<th>Sub Subject Name</th>
</tr>`;
let body = "";
subjectDetail.forEach(function(subjectDetailObj, key){
if(key == 0){
console.log("1");
}
var prev = key;
console.log(prev);
var curr = key+1;
console.log(curr);
if(subjectDetail[prev].name === subjectDetail[curr].name){
console.log("error");
}
else{
console.log(subjectDetail[curr].name);
}
body +=`<tr>
<td>${key + 1}</td>
<td>${subjectDetailObj.name}</td>
<td>${subjectDetailObj.subSubjectName}</td>
</tr>`;
});
$('#subjectTable').html(table + header + body);
}

my suggest is to :
structure the fetched data in the server side by grouping them
by columns name, so you will get some thing like that :
PARENT 1
|_CHILD1
|_CHILD2
PARENT 2
|_CHILD1
|_CHILD2
|_CHILD3
in the client side ( javascript ) by knowing the number of childs
in the current object you can make a rowspan in case it has more
than one CHILD or not.
Hope that can be helpful for you.

Table headers of second table not correct with queryAllSelector

I am using a JavaScript snippet to show a responsive table, setting the headers on mobile via attributes. This works, but, if I use a second table with the same class, it goes all wrong on mobile (please resize your screen to see this); the headers of.
What am I doing wrong here and how can I fix this?
This is the HTML:
<table class="test">
<thead>
<tr>
<th>Bla</th>
<th>Bla</th>
<th>Bla</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla</td>
<td>Blabla</td>
<td>Blablabla</td>
</tr>
</tbody>
</table>
<table class="test">
<thead>
<tr>
<th>Not</th>
<th>Not</th>
</tr>
</thead>
<tbody>
<tr>
<td>Twatwa</td>
<td>Twatwa</td>
</tr>
</tbody>
</table>
http://codepen.io/anon/pen/QbJqVv
Edit: after the new answer, it does show table headers on the second table now, but not the correct ones. It just puts the table headers of the first table, into the second.

As I wrote in the comments, you need to handle each table separately. For .querySelectorAll('.test th') will simply give you all th elements, irregardless of which table they belong to.
Here's a quick example of how this could be done.
// for each .test
[].forEach.call(document.querySelectorAll('.test'), function (table) {
// get header contents
var headers = [].map.call(table.querySelectorAll('th'), function (header) {
return header.textContent.replace(/\r?\n|\r/, '');
});
// for each row in tbody
[].forEach.call(table.querySelectorAll('tbody tr'), function (row) {
// for each cell
[].forEach.call(row.cells, function (cell, headerIndex) {
// apply the attribute
cell.setAttribute('data-th', headers[headerIndex]);
});
});
});
demo: http://codepen.io/anon/pen/NqEXqe

First of all, your HTML is invalid, as you are not closing any of your elements (<tr><td></td></tr> etc) - but that's another issue. Please practice good HTML standards.
You are not using querySelectorAll when selecting your table bodies, so you're only setting the attribute in the first one found.
This revised snippet should achieve what you are trying to do.
var headertext = [],
headers = document.querySelectorAll(".test th"),
tablerows = document.querySelectorAll(".test th"),
tablebody = document.querySelectorAll(".test tbody");
for(var i = 0; i < headers.length; i++) {
var current = headers[i];
headertext.push(current.textContent.replace(/\r?\n|\r/,""));
}
for (var tb = 0; tb < tablebody.length; tb++) {
for (var i = 0, row; row = tablebody[tb].rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
}
}
}

Filtering table rows upon Search

I am trying to filter the rows of a table to display the results of entered text in the search bar. The code below does the job but for some reason filters the column headings as well.
$('#search').keyup(function () {
var data = this.value.split(" ");
var rows = $(".Info").find("tr").hide();
if(this.value ==""){
rows.show();
return;
}
rows.hide();
rows.filter(function(i,v){
var t = $(this);
for (var d = 0; d < data.length; d++) {
if (t.is(":Contains('" + data[d] + "')")) {
return true;
}
}
return false;
}).show();
});
HTML
<input type = "search" name = "search" id = "search">
<table style ="width:95%" class = "Info">
<tr>
<th>Select </th>
<th>Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
The user adds rows which is why i haven't written any HTML for it.
Any help would be appreciated. Thanks in advance

http://jsfiddle.net/szjhngwm/
It looks like you need to filter using tbody
<table style ="width:95%" class = "Info">
<thead>
<tr>
<th>Select </th>
<th>Name</th>
<th>Number</th>
<th>Date</th>
</tr>
<thead>
<tbody>
</tbody>
</table>
var rows = $(".Info tbody tr").hide();

Another way to do this would be to use jQuery's :gt() selector.
The only thing that would change is this line:
var rows = $(".Info").find("tr:gt(0)").hide();
Notice the addition of :gt(0) to your tr.

bootstrap table unable to load json objects

My ajax script sends json objects to browser but the table is unable to load the json object.
My Ajax script:
$.ajax({
type : "POST",
url : "getLabels.jsp",
data : "mailingID=" + selectedValue, // posCodeSelected
success : function(data) {
response = $.parseJSON(data);// this statement sends data succesfully to browser
},
error : function(response) {
var responseTextObject = jQuery.parseJSON(response.responseText);
}
});
This is my bootstrap table embedded into my jsp page.
<table data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
<thead>
<tr>
<th data-field="rowNumber" >ID</th>
<th data-field="firstname" >first name</th>
<th data-field="lastname" >last name</th>
<th data-field="organization" >organization</th>
<th data-field="city" >city</th>
<th data-field="state" >state</th>
</tr>
</thead>
</table>
Just to let you guys now this is my json response in browser:
{"rowNumber":1,"mailingID":3,"firstname":"Brian","lastname":"Fairhurst","organization":"Florida State University","city":"Tallahassee","state":"FL"}

You have to add a new row with the json object returned:
//you need to set id="tbl" to your table on the html
var table = document.getElementById("tbl");
var row = table.insertRow(table.rows.length); //insert a new row
// insert new cells with info
cells = [];
for(var i = 0;i < 6;i++){
cells[i] = row.insertCell(i);
}
// add the information store in json object
cells[0].innerHTML = response.rowNumber;
cells[0].innerHTML = response.firstname;
cells[0].innerHTML = response.lastname;
cells[0].innerHTML = response.organization;
cells[0].innerHTML = response.city;
cells[0].innerHTML = response.state;

The problem is that the HTML table isn't being populated with the data in response. Adding the data-url attribute to your HTML table should work.
So, instead of:
<table data-height="299" data-show-refresh="true" ...>
<thead>
...
You'll want to do:
<table data-height="299" data-show-refresh="true" data-url="response"...>
<thead>
...