function updateTable(data1, data2) {
var table = document.getElementById("placeWhereUpdateNeeded");
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.appendChild(document.createTextNode(data1));
td2.appendChild(document.createTextNode(data2));
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
Problem is that the Id("placeWhereUpdateNeeded") is in another HTML document (not the currently active one). Is it even possible to add the data to another HTML doc? Currently that code would search for the Id in the active HTML (where it doesn't exist). So basically, is it possible to specify a HTML document where getElementById searches for the Id? I realize it's a very silly issue, I've only started learning. Any help welcome!
Related
I'm trying to make a barcode scanner and I have a problem when some product doesn't exist it creates a new array with JavaScript and sends the problem to the that table. My problem is that I can't edit the table with innerHTML
JavaScript Function:
var table = document.getElementById("listViewTable");
var tableF = document.getElementById("listTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var td1 = document.createElement("td");
//row.innerHTML = '(A few <td> and an <input>)';
td1.innerHTML = '(More <td> and another <input>)';
row.appendChild(td1);
row.className = "tableCell newSKU";
That commented line row.innerhtml is what I tried to achieve but I.E does not support it.
This should be the end result:
The last product in yellow can't be put in the same table and as such does not have the same style as the others.
From ppk's guide to browser quirks:
In IE9 and lower innerHTML refuses to work on tables and selects. Solve this by using pure DOM methods instead. See this explanation of the table behaviour by innerHTML’s inventor. I assume something similar goes for selects.
Use createElement, appendChild and friends to create the cells.
I am using jquerymobile 1.3 -> column toggle Table widget.
http://view.jquerymobile.com/1.3.0/docs/widgets/table-column-toggle/
I am creating the rows and columns dynamically. When I do this, the column toggle mode doesn't work. If I hardcode the data, it works. What could be wrong?
I am also refreshing as suggested in their documentation.
$( "#myTable" ).table-columntoggle( "refresh" );
My Javascript code is straight forward.
var tBody = document.getElementById('idTBody');
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.innerHTML = "Some string";
tr.appendChild(td);
tBody.appendChild(tr);
idTBody is an id assigned to Tbody tag.
It seems that it is a known bug in jquerymobile in 1.3.0 and will be fixed in 1.3.1.
Here's the link --> https://github.com/jquery/jquery-mobile/issues/5640 and here is the tracker link -->https://github.com/jquery/jquery-mobile/issues/5570
So what I do is create a new table cell, then I want to place the image content from this website into that table cell, however the table cell doesn't have an ID, with load am i required to do
$("#id").load("http://www.thisiswhyimbroke.com li:first img");
or can I do something like this, because I can't give seperate ID's to everyone.
var tdPic = document.createElement("td");
tdPic.innerHTML = load("http://www.thisiswhyimbroke.com li:first img");
I can not figure out why the text inside the TD is not displayed in IE7. I am frustrated to the core cuz it works in FF! All I am trying to do is dynamically build a table onload... Any help will be greatly appreciated.
The complete script is at pastebin
User insertRow and insertCell to add Rows and Cells
Ex:
var row = table.insertRow();
row.id= rowid;
var headerCell = row.insertCell();
headerCell.colSpan = colspan;
headerCell.className = "rightAligned";
headerCell.innerHTML = "Header Text";
use the insertRow(-1) to add a row instead, and insertCell(-1) to add a column
updated code: http://pastebin.com/mTym410P
IE needs a TBODY. Just add it as the first child of your table and then append your rows and cells to that.
I looked at some other questions like this one but they don't address this particular issue:
When I run this code in IE (8):
$("<tr><td>1</td><td>A</td></tr>").appendTo("#myTable tbody");
I end up with this HTML being added to the table's body:
<TR>
1</TD><//TD>
<TD>
</TD>
A</TD><//TD></TR><//TR>
</TR>
Any idea? Thanks in advance.
What you're trying to do is really difficult to do correctly. This is because a <TR> element is meaningless outside the scope of a <TABLE>. While interpreting your intent is easy for us humans, it's very possible that jQuery is not smart enough to do it, and do the right thing.
The right thing here would be something like:
var tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = document.createElement('tr');
tbody.appendChild(row);
var cell = document.createElement('td');
cell.innerHTML = '1';
row.appendChild(cell);
cell = document.createElement('td');
cell.innerHTML = 'A';
row.appendChild(cell);
Now the code in your question is admittedly much more compact, but that doesn't mean that jQuery will need to do much less work behind the scenes to actually achieve desired results.
try
$("#myTable tbody").append("<tr><td>1</td><td>A</td></tr>");
it'sthe same, but it does totally different things inside the jQuery