I have a table and assigned a id to it. Initially there is no content.i.e., just the table tag.
I am using this to clear the table contents
function emptyTable ( tableRef )
{
var resultCount = tableRef.rows.length;
for ( var i=0; i<resultCount; i++)
{
if ( tableRef.rows[tableRef.rows.length-1].cells[0].tagName == "TD" )
{
tableRef.deleteRow(tableRef.rows.length-1);
}
}
}
tableRef will have the table id. For first time i have clear the table and the rows are inserted.
var resultListRef = document.getElementById("showReferencesDet");
var row = resultListRef.insertRow(0);
var newCell = row.insertCell(0);
newCell.innerHTML = 'Select';
var newCell2 = row.insertCell(1);
newCell2.innerHTML = 'Reference Number';
var row = resultListRef.insertRow(resultListRef.rows.length);
var newCell = row.insertCell(0);
name="referenceId" value="' + id + '" />';
newCell.innerHTML = '<input type="checkbox" id="referenceId" name="referenceId" value="' + allVars + '" />';
var newCell2 = row.insertCell(1);
newCell2.innerHTML = RefNo;
It works for the first time but didn't works in the 2nd time.
Please help to solve it.
just change your for loop
function emptyTable ( tableRef )
{
document.getElementById(tableRef).innerHTML='';
}
Instead of:
var row = resultListRef.insertRow(resultListRef.rows.length);
you can do:
var row = resultListRef.insertRow(-1);
and the row will be inserted as the last row.
Removing the rows of a table doesn't necessarily remove all content, it may still contain empty text nodes, thead and tfoot elements, etc. Consider:
function emptyTable ( tableRef ) {
while (tableRef.firstChild) {
tableRef.removeChild(tableRef.firstChild);
}
}
That will clear everything from inside the table (but not properties and attributes of the table itself) as if you had <table ... ></table>.
However, you may want to keep header rows and footers. In that case, you just want to remove the tBody elements:
function emptyTableBodies ( tableRef ) {
var tBodies = tableRef.tBodies;
for (var i=tBodies.length; i;) {
tableRef.removeChild(tBodies[--i]);
}
}
so you can do:
<table id="t0">
<thead>
<tr><th>head
</thead>
<tr><td>0
<tr><td>0
<tr><td>0
<tr><td>0
</table>
<button onclick="emptyTableBodies(document.getElementById('t0'))">Empty table bodies</button>
Note that a table with no content is not valid, so fix that as soon as you can after the above.
Related
Anyways, I'm currently doing a repeater-type of add/delete rows. Looking through the documentation, it only appears to manual delete based on row number.
Take not that this is called under a LaravelBlade foreach loop so I added respective IDs when being clicked
var approverCount = 0;
function add(id)
{
var table = document.getElementById("table" + id);
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "Hi";
cell2.innerHTML = "Hello";
testCount++;
row.id = 'teste_' + id + '_' + testCount;
}
function remove(tableId, rowId)
{
var table = document.getElementById(tableId);
var row = document.getElementById(rowId);
table.deleteRow(row);
// stopped here due to constraints from problem
}
If your goal is to delete a table row by its id, then it can be done purely from that one id, and it's fairly straightforward with remove (slightly modern) or parentNode and removeChild (universally supported):
// On a modern browser
document.getElementById(theRowID).remove();
or
// On slightly less modern browsers
var row = document.getElementById(theRowID);
row.parentNode.removeChild(row);
If for some reason you really want to use the table's deleteRow, then you'd use the row's rowIndex:
table.deleteRow(row.rowIndex);
You must use row number instead of id attribute:
table.deleteRow(0);
I am looping through a grids datasource and when it gets to ToFactory not being empty I need to add a div into its td cell. Below is the code that I am using to get the td at index 18 of its row
var data = this.dataSource.view();
for(i=0;i<data.length;i++){
var dataItem = data[i];
var tr = $("#QuickEntryGrid").find("[data-uid='" + dataItem.uid + "']");
if(dataItem.ToFactory != ""){
let me = tr.find('td')[18];
me.innerHtml = "<div class='abc'>1234</div>"; // Doesn't work
console.log(me);
}
}
the variable me is
<td class role='gridcell'></td>
and what I would like to put in the td is
<div class='abc'>123</div>
and me should look like this
<td class role='gridcell'><div class='abc'>123</div></td>
but its not happening,
any idea's on why I am not getting this working? I have also tried
me.append("<div class='abc'>123</div>");
I´m filling a table with jquery from a JSON data source
var data = dataJSONMOV,
fragment = document.createDocumentFragment(),
tr, td, i, il, key;
for(i=0, il=data.length;i<il;i++) {
tr = document.createElement('tr');
for(key in data[i]) {
td = document.createElement('td');
td.appendChild( document.createTextNode( data[i][key] ) );
tr.appendChild( td );
}
//Button generation code should go here (see below)
fragment.appendChild( tr );
}
$('#mytable tbody').append( fragment.cloneNode(true) );
I want to add a button in the end of each row which calls a function displayInformation(string ID) with a parameter from the first coloumn of that row.
How can I accomplish that?
I tried it with this code but it doesn`t show me any buttons
//Button generation code
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = data[i][0];
btn.onclick = (getTestAlert(data[i][0]));
tr.appendChild(btn);
You are on right direction on how add the button. You can add it and them add an event listener to the table:
$('#mytable').on("click", "input", function() {
});
// Or
$('#mytable').on("click", "input", getTestAlert);
So, to know what id it belongs, add a data attribute:
var btn = document.createElement('input');
btn.dataset.id = data.id;
And how to retrieve it:
$('#mytable').on("click", "button", function() {
var id = $(this).data("id"); // For jQuery
id = this.dataset.id; // For vanilla
});
Your loop would probably end like this:
for(i=0, il=data.length;i<il;i++) {
tr = document.createElement('tr');
for(key in data[i]) {
td = document.createElement('td');
td.appendChild( document.createTextNode( data[i][key] ) );
tr.appendChild( td );
}
// Add button in last column
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = data[i][0];
btn.onclick = (getTestAlert(data[i][0]));
tr.appendChild(btn);
fragment.appendChild( tr );
}
Working demo
Besides, I don't know if its some kind of a requirement, but if you're using jQuery, you should use it for your entire code, like the elements creating as well. Creating elements may be odd in some browsers and jQuery takes care of it. If you're interested, your code should became something like:
var data = dataJSONMOV,
fragment = document.createDocumentFragment(),
key, html = "";
for(var i=0, il=data.length;i<il;i++) {
html+= "<tr>";
for(key in data[i]) {
html+= "<td>" + data[i][key] + "</td>";
}
html+= "<td><input type='button' class='btn' value='Click me' data-id='" + data[i].id + "' /></td></tr>";
}
$("#mytable").append(html);
Pretty short, huh ?
Because you're populating the table dynamically, you need to add a click listener based on some parent defined in the html. Assuming this is the case for '#myTable tbody' and that the parameter from the first column of that row that you need for displayInformation() is accessible via .text(), you could use
$(document).ready(function() {
$('#myTable tbody').on('click', 'input[type="button"]', function() {
displayInformation($('td:first-child', $(this).parents('tr')).text());
});
});
to create the click listener for the row's button.
<tbody id="contacttable">
</tbody>
<script>
var hrtypeCode = document.getElementById('hrtypeCode').value;
var hrCode = document.getElementById('hrCode').value;
var hrName = document.getElementById('hrName').value;
var hrDesc = document.getElementById('hrDesc').value;
for(i=0;i<hrCode.length; i++){
if(hrCode[i]!="") {
var table = document.getElementById("contacttable");
var slNo = table.rows.length;
var tr = table.insertRow(slNo-1);
tr.id = 'list_tr_' + slNo;
tr.innerHTML ='<td><input type="text" name="hrtypeCode" value="'+hrtypeCode[i]+'" ></td><td><input type="text" name="hrCode" value="'+hrCode[i]+ '"></td><td><input type="text" name="hrName" value="'+hrName[i]+'" ></td>';
count++;
}
}
</script>
<i>
how to find out the cell values.i have tried the following code but it showing entire TD row
tbl.rows[i].cells[j].innerHTML);
alert(tbl.rows[i].cells[j].innerHTML);
Kindly help in finding the value.. thanks.
Table cells don't have values, only input elements do. You need to access the <input> element within the table cell.
Use:
tbl.rows[i].cells[j].getElementsByTagName("input")[0].value
DEMO
I have created ten separate tables in javascript using HTML tags. I now want to put those tables in a grid format so I thought putting them into another table would work. This code just makes an empty table appear. Any help? Thanks!
document.getElementById('InstalledApps').innerHTML += '<table id="bigAppsTable" border="1"><td>';
for (var i = 9; i>-1;i--){
document.getElementById('InstalledApps').innerHTML += '<table id="appsTable'+i+'" border="1"><tr></tr>';
var thirdRow=document.getElementById("appsTable"+i).insertRow(1);
if (the_data[i]['release'] != null){
thirdRow.insertCell(-1).innerHTML="<b>Release: ";
thirdRow.insertCell(-1).innerHTML=the_data[i]['release'];
}
var secondRow=document.getElementById("appsTable"+i).insertRow(1);
secondRow.insertCell(-1).innerHTML="<b>Version: ";
secondRow.insertCell(-1).innerHTML=the_data[i]['version'];
var firstRow=document.getElementById("appsTable"+i).insertRow(1);
firstRow.insertCell(-1).innerHTML="<b>Name:";
firstRow.insertCell(-1).innerHTML=the_data[i]['name'];
}
Since you're dynamically creating tables, why not use the DOM API? (ie. not innerHTML)
Here is a good place to get your started: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
Try like this
var aTable = document.createElement('table');
for (var i = 0, tr, td; i < 9; i++) {
tr = document.createElement('tr');
td = document.createElement('td');
td.appendChild(document.createTextNode("some text"));
tr.appendChild(td);
aTable.appendChild(tr);
}
//update with id
document.getElementById('table').appendChild(aTable);