Best way to add row to HTML table without re-rendering - javascript

I am using websockets (socket.io) for real-time stuff, and it may be that a new item is added to a collection which I would like to then add to the screen. Is there a good way to add a row to an HTML table without re-rendering the whole view?

You can use insertRow on that table. Here is an example:
<table id="TableA">
<tr>
<td>Old top row</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
// Get a reference to the table
var tableRef = document.getElementById(tableID);
// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(0);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode('New top row');
newCell.appendChild(newText);
}
// Call addRow() with the ID of a table
addRow('TableA');
</script>
Example taken from the Mozilla page for insertRow.

Related

How do I align new table rows added using JS with existing table rows?

The table rows I added are the top 2 (MAT235 and CSC263). If it helps, I can also post the HTML code of the bottom 2 rows and of the top 2 rows.
This is how I added table rows/data:
var tableRef = document.getElementsByClassName('section academic-history xs-block-table')[0].getElementsByTagName('tbody')[1];
var newRow = tableRef.insertRow(1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'MAT235Y1'
and this is what the existing rows' HTML looks like
<tr data-ng-repeat="course in session.courses" class="courses">
<td>STA257H1</td>
<td>Probability and Stat I</td>
<td class="course-weight">0.50</td>
</tr>
And this is the new rows' HTML generated by my JS code above.
<tr>
<td>MAT235Y1</td>
<td>Calculus</td>
<td>1.00</td>
</tr>
EDIT: #wOxxOm's comment fixed it for me.
By the request of #isherwood, I am providing an answer I received from #wOxxOm.
The solution is to copy the class name attribute (newRow.className = 'courses') for the new rows.

Dynamically inserting a bootstrap-select cell into a table row not working

I have dynamically created a table row and am inserting each cell into a the row and then into the table. All the previous cells are working (as they are simple checkbox inputs or plain text) however this row is different.
I am trying to insert a bootstrap-select dropdown into a table cell dynamically and am not having any luck. It is not throwing any errors, however it is not displaying a dropdown.
My attempt based off this quick search:
var cell = row.insertCell(5);
var selectCell = $('<select/>', {
'class': "selectpicker"
});
selectCell.append("<option>Value 1</option>");
selectCell.append("<option>Value 2</option>");
selectCell.append("<option>Value 3</option>");
selectCell.appendTo(cell);
Any help is appreciated.
Thanks
You can do it like this:
Table
<table>
<tr id="row"></tr>
</table>
Script
var row = document.getElementById('row');
var cell = row.insertCell(0);
/*var selectCell = $('<select/>', {
'class': "selectpicker"
});*/
var selectCell = $('<select>');
$(selectCell).addClass('selectpicker');
selectCell.append("<option>Value 1</option>");
selectCell.append("<option>Value 2</option>");
selectCell.append("<option>Value 3</option>");
selectCell.appendTo(cell);
Online result jsfiddle.

Append child can`t add more than 1 child node

var data={
1:"dasf",
2:"jlla",
3:"jalf"
};
(function () {
var table=document.createElement("table");
var tr=document.createElement("tr");
for(var i in data){
tr.innerText=data[i];
(function(){
table.appendChild(tr);
console.log("in"+tr.innerText)
})();
console.log("out"+table);
}
})();
it always shows different and changes everytime,guessing the time appendchild happenes is not simply following?
You only create one tr element.
Each time you append it, you move it from where it was in the DOM and put it in the new location.
If you want to create a new table row for each item in data, then you need to move your createElement call inside the loop.
(You also need to change how you are adding content to it, a tr element isn't allowed to contain text directly, and if you aren't putting multiple data cells in each row, you should probably be using a list instead of a table in the first place).
See this snippet code for creating table
I have edited your code
<div id="wrap"></div>
<script>
var data={
1:"dasf",
2:"jlla",
3:"jalf"
};
(function () {
var table=document.createElement("table");
var tr;
var td;
for(var i in data){
tr=document.createElement("tr");
td=document.createElement("td");
td.innerText = data[i];
tr.appendChild(td);
table.appendChild(tr);
}
document.getElementById("wrap").appendChild(table)
})();
</script>
This will be the output table:
<table>
<tr>
<td>dasf</td>
</tr>
<tr>
<td>jlla</td>
</tr>
<tr>
<td>jalf</td>
</tr>
</table>

How to insert HTMLTableRowElement into a Table Body?

I've taken a look at table and table body methods, and it does not mention how to insert a HTMLTableRowElement. Anyone know a nice way to insert a HTMLTableRowElement into the table body?
const tbody = document.getElementsByTagName('tbody')[0];
// Only inserts an empty row
// Want to insert a HTMLTableRowElement that I've parsed using jsdom
tbody.insertRow();
EDIT:
With guidance #frontend_dev, it looks like jsdom is not using native DOM elements. So the solution may look something like the follow:
let rows_rep = '';
jsdom.env(html_with_tr, function(err, w) {
rows_rep = w.document.getElementsByTagName('tr')[0].outerHTML;
}
const tbody = document.getElementsByTagName('tbody')[0];
const newRow = tbody.insertRow();
newRow.innerHTML = rows_rep;
Given an HTML string containing the row you want to add, you can get that row without jsdom and append it to a table in the current document:
// Sample HTML string:
var html = `<html>
<body>
<h1>my title</h1>
<table><tr><td>dynamicly added row</td></tr></table>
<p>other text in here</p>
</body>
</html>`;
// Create in-memory element and load HTML into it:
var span = document.createElement('span');
span.innerHTML = html;
// Get the row element out of it, and append it:
var tr = span.querySelector('tr');
var tbody = document.querySelector('tbody');
tbody.appendChild(tr);
<table border=1>
<tr><td>existing row</td></tr>
</table>

Dynamically appending a row by cloning an existing row?

I have a row in a table and that row is not displayed as css style is set to display:none .
HTML table:
<table class="myTable">
<tr class="prototype">
........
</tr>
</table>
CSS code:
.myTable .prototype{display:none;}
Now i have to clone the same row and add some data to it and append the row to the table as below: i have below jquery code:
var master = $(this).parents("table.myTable");
var prot = master.find(".prototype").clone();
prot.attr("class", "");
prot.find("#attributeValue").attr("value", "ABC");
prot.find("#contactFirstName").attr("value", "XYZ");
jQuery('table.myTable tr:last').before(prot);
But the row won'ttbe added to the table. Please help me.
Thanks!
If you run the code in the onLoad event, change the first line to var master = $(this).find("table.myTable"); or var master = $("table.myTable");
Use prot.removeClass(); instead of prot.attr("class", "");
Ids have to be unique, if elements in your prototype-row have an id you get invalid HTML.
Use $().val('ABC') instead of $().attr('value', 'ABC')
If it still doesn't work, please show more code (maybe a jsfiddle).
var master = $(this).parents("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.find("#attributeValue").val("ABC");
prot.find("#contactFirstName").val("XYZ");
master.append(prot);
prot.show();

Categories

Resources