How to include multiple td into the tr?

How to include multiple td into the tr? - javascript

I just wanted to append td in the tr
Table
<table class="u-full-width" id="result">
<thead>
<tr>
<th>Project Name</th>
<th>Id</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dave Gamache</td>
<td>26</td>
<td>Male</td>
</tr>
</tbody>
</table>
Script
// Receive Message
socket.on('message', function(data){
console.log(data);
var Project = data.project;
var Id = data.id;
var Event = data.event;
var tr = document.createElement("tr");
var td1 = tr.appendChild(document.createElement('td'));
var td2 = tr.appendChild(document.createElement('td'));
var td3 = tr.appendChild(document.createElement('td'));
td1.innerHTML = Project;
td2.innerHTML = Id;
td3.innerHTML = Event;
document.getElementById("result").appendChild(td1, td2, td3);
});
I come up with this above code but this is not working means see the image...

The last line is wrong. You should append the tr to the table, not all the tds.
document.getElementById("result").appendChild(tr);

document.getElementById("result").appendChild(td1, td2, td3);
seems you are appending your tds directly to the table, not a tr in the tbody.

Try this way to bind your data
<table class="u-full-width" id="result">
<thead>
<tr>
<th>Project Name</th>
<th>Id</th>
<th>Event</th>
</tr>
</thead>
<tbody id="bodytable">
</tbody>
</table>
socket.on('message', function(data){
console.log(data);
var _html='';
html +='<tr>'
html +='<td>'+data.project+'</td>';
html +='<td>'+data.id+'</td>';
html +='<td>'+data.event+'</td></tr>';
$('#bodytable').append(_html);
});

Related

How to add table row and colums at specific index

How to add a table row or table column at specific index by on clicking the table cells, same as excel sheet.
<table >
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Add Row Script:
function AppendRows() {
var tableRows = document.getElementById('myTable'),
row = tableRows.insertRow(tableRows.rows.length);
row.height = '50';
for (var i = 0; i < tableRows.rows[0].cells.length; i++) {
row.insertCell(i), i, 'row';
}
}

Here is an example on how you can insert a new row. There are several approaches you can go with but basically this is the way
function insertrow() {
var newRowIndex = 1;
var row1 = document.getElementById("table").childNodes[1].childNodes[newRowIndex];
var newRow = document.createElement("tr");
var col0 = document.createElement("td");
col0.innerHTML = "newA";
newRow.appendChild(col0);
var col1 = document.createElement("td");
col1.innerHTML = "newB";
newRow.appendChild(col1);
var col2 = document.createElement("td");
col2.innerHTML = "newC";
newRow.appendChild(col2);
row1.parentNode.insertBefore(newRow, row1);
}
<button onclick="insertrow()">Insert row</button>
<table id="table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Also i'd suggest you take a look at the insertBefore documentation.

Here's a method to insert a row after a row is clicked. The new row is added immediately after the clicked row, so new rows can be added at different locations.
Let's walk through it:
First we setup an event listener on the table to listen for clicks on the row elements. When a row is clicked, we call the the appendRow method to add a new row, and pass the index where we want the row to appear.
We're using delegation here so dynamically added rows will be included in the event listener.
The appendRow method adds a new row at the defined index, then adds a few table cells for presentation purposes.
var tableEl = document.getElementById('table');
tableEl.addEventListener('click', function(event) {
var el = event.target;
if (el.closest('tr') && el.closest('tbody')) {
var trow = el.parentElement;
var tbody = trow.parentElement;
var index = Array.prototype.indexOf.call(tbody.children, trow);
appendRow(tbody, index + 1);
}
});
function appendRow(tbody, index) {
var row = tbody.insertRow(index);
var cells = ['A', 'B', 'C'];
cells.forEach(function(cell, idx) {
var newCell = row.insertCell(idx);
var newText = document.createTextNode(`Row ${index} - ${cell}`);
newCell.appendChild(newText);
});
}
table {
table-layout: fixed;
width: 100%;
}
td {
border: 1px solid gray;
}
<table id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

Adding rows to table body dynamically

I am trying to add rows to an existing table that has header and footer also.
Here is my code:
<script>
function test() {
var tbl = document.getElementById("tbl");
var lastRow = tbl.rows.length - 1;
var cols = tbl.rows[lastRow].cells.length;
var row = tbl.insertRow(-1);
for (var i = 0; i < cols; i++) {
row.insertCell();
}
}
</script>
<table id="tbl" onclick="test()">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
when I click on any table I want to add new row to table body, but the issue here is the new row is added to table footer. please help me how to fix this issue.

You insert the row into the tBody element. Since there can be more than one tBody, you should refer to the tBodies prop of table at index 0.
var row = tbl.tBodies[0].insertRow(-1);
function test() {
var tbl = document.getElementById("tbl");
var lastRow = tbl.rows.length - 1;
var cols = tbl.rows[lastRow].cells.length;
var row = tbl.tBodies[0].insertRow(-1);
for (var i = 0; i < cols; i++) {
row.insertCell().appendChild(document.createTextNode(i));
}
}
test();
<table id="tbl" onclick="test()">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

Try something like this. Just clone first row and then append it as child to your table. Hope it will help you
function appendRow() {
let tbl = document.getElementById("tbl");
let newRow = tbl.rows[0].cloneNode(true);
tbl.appendChild(newRow);

How to count the rows in a DataTable based on the row values

I have a datatable in which i am storing some data.Now my need is that i want to count the rows on the basis of the row values.How to achieve that.I am posting my dataTable code
$("div.loader").show();
$("#backgroundPopup").show();
$("#backgroundPopup").css("opacity", "0.7");
var url = "<%=byopenjobResourceURL%>";
var type = "onLoadForByOpenJob";
var createTable = '<table id="mainTable" class="display"><thead><tr><th>Create Date</th><th>Job Order</th><th>ID</th><th>Owner</th><th>Client</th><th>Value</th><th>Product</th></thead><tbody>';
var totalActivities = '0';
jQuery.getJSON(url+"&type="+type, function(data) {
for(var z=0; z<data.searchResultArray.length;z++){
searchResultArray = data.searchResultArray[z].split("$$##$$##");
createTable = createTable + "<tr><td>"+searchResultArray[0]+"</td><td>"+searchResultArray[1]+"</td><td>"+searchResultArray[2]+"</td><td>"+searchResultArray[3]+"</td><td>"+searchResultArray[4]+"</td><td>"+searchResultArray[5]+"</td><td>"+searchResultArray[6]+"</td></tr>";
}
$('#mainTable').dataTable({
"scrollY": 300,
"scrollCollapse": true,
"jQueryUI": true,
"aaSorting": []
});
How to achieve that?Lets say i want to count the product column by its content.i.e i want to how many Search - Contigent is there

This is how you can sum up rows in a table
<table id="mainTable" class="display">
<thead>
<tr>
<th>Create Date</th>
<th>Job Order</th>
<th>ID</th>
<th>Owner</th>
<th>Client</th>
<th>Value</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function sumTable() {
var rows = $('tbody tr'),
result = [],
sumLine = $('<tr>');
rows.each(function(index, item){
$(item).find('td').each(function(index, cell){
if(!result[index]) { result[index] = 0; }
result[index] += cell.innerText *1;
});
});
$.each(result, function(index, item) {
var cell= $('<td>');
cell.text(item);
sumLine.append(cell);
});
$('tbody').append(sumLine);
}
sumTable();
</script>
first cycle through all lines in the tbody and then for each line cycle through each td and sum the contents into an array. Which is added at the end. You could also just get the sum of the array instead of adding it as a row at the end of the table.

insertRow JavaScript not recognized

I'm new to javascript but still tend to try fixing an issue myself. However, I got frustrated because the same function works for a slightly different HTML without tbody and thead.
The error I get is --> Uncaught TypeError: Cannot read property 'insertRow' of null.
Where am I wrong? Also probably there is a better way to add a table row? I tried .append but it did not work for me.
HTML
<table class="table table-striped myTable">
<button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>City</th>
<th>Sex</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr id="firstRow">
<td>John</td>
<td>Morgan</td>
<td>mail#mail.com</td>
<td>London</td>
<td>Male</td>
<td>09.12.14</td>
<td>04:17 a.m.</td>
</tr>
</tbody>
</table>
JavaScript
$("#addTableRow").click( function(){
var table = document.getElementById("myTable");
var row = table.insertRow(0);
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);
cell1.innerHTML = "Text-1";
cell2.innerHTML = "Text-2";
cell3.innerHTML = "Text-3";
cell4.innerHTML = "Text-4";
cell5.innerHTML = "Text-5";
cell6.innerHTML = "Text-6";
});

Just a few typos, missing ID on your table and mixing jQuery incorrectly.
$("#addTableRow").click( function () {
var row = $("<tr>");
row.append($("<td>Text-1</td>"))
.append($("<td>Text-2</td>"))
.append($("<td>Text-3</td>"))
.append($("<td>Text-4</td>"))
.append($("<td>Text-5</td>"))
.append($("<td>Text-6</td>"))
.append($("<td>Text-7</td>"));
$("#myTable tbody").append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myTable" class="table table-striped myTable">
<button class="btn btn-primary btn-lg" id="addTableRow">Add table row</button>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>City</th>
<th>Sex</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr id="firstRow">
<td>John</td>
<td>Morgan</td>
<td>mail#mail.com</td>
<td>London</td>
<td>Male</td>
<td>09.12.14</td>
<td>04:17 a.m.</td>
</tr>
</tbody>
</table>

Not strictly related to the question, but I ended up here for having the "Uncaught TypeError: table.insertRow is not a function" error. You may be having the same problem. If so:
If you want to use
row.insertCell(0);
and you receive the former error, be sure not to get the element by using jquery:
DO NOT
let table = $("#peopleTable");
let newRow = table.insertRow(0);
DO
let table = document.getElementById("peopleTable");
let newRow = table.insertRow(0);

How do I output the contents of an array in an html table while using jQuery?

How do I display the contents of an array in a HTML table while using jQuery?
Here's my script... This outputs the objects in the array on top of the table not in the table.
HTML
<table>
<thead>
<tr>
<th>ITEM ID</th>
<th>NUMBER OF BAGS</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody>
<div id="returnlist"></div>
</tbody>
</table>
jQuery
var tempList = new Array();
$('#add').click(function(){
var split = $('#onhanditem').val().split('_');
var itemid = split['0'];
var kilo = $('#kilo').val();
var bagsReturned = $('#bagsReturned').val();
var totalbagkiloreturned = kilo+'_'+bagsReturned;
tempList[itemid] = totalbagkiloreturned;
list = '';
// i = ITEM ID | tempList = totalbagkiloreturned
for (var i in tempList){
var itemID = i;
var split = tempList[i].split('_');
var kilo = split['0'];
var numBags = split['1'];
list+='<tr><td>'+itemID+'</td><td>'+kilo+'</td><td>'+numBags+'</td></tr>';
}
$('#returnlist').html(list);
});
});

As far as I'm aware, the middle of a table isn't a valid location for a <div> tag, which is why it's not being displayed inside the table. Why not put your id on the <tbody> tag instead, and do away with the div altogether?

You can't have a div inside a table, it's simply not valid HTML.
Try the following HTML instead
<table>
<thead>
<tr>
<th>ITEM ID</th>
<th>NUMBER OF BAGS</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody id="returnlist">
</tbody>
</table>

Develop Reference

JavaScript is the programming language of the Web.

How to include multiple td into the tr? - javascript

The last line is wrong. You should append the tr to the table, not all the tds. document.getElementById("result").appendChild(tr);

document.getElementById("result").appendChild(td1, td2, td3); seems you are appending your tds directly to the table, not a tr in the tbody.

Related

How to add table row and colums at specific index

Adding rows to table body dynamically

How to count the rows in a DataTable based on the row values

insertRow JavaScript not recognized

How do I output the contents of an array in an html table while using jQuery?

Categories

Resources