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.
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.
code in html file is as following:
<html>
<script type="text/javascript">
var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}];
</script>
<table id="tb1">
<tr id="row1">
<td style="background-color:gray" id="name">name</td><td style="background-color:gray" id="id">id</td>
</tr>
<tr id="row2"><td>shouldn't be added here</td><td>neither here</td></tr>
</table>
</html>
I want to add the contents of records between row1 and row2 in pure javascript.(without any third party javascript framework) What should I do?
You don't add to "tags," you add to elements.
In the general case, you create elements via document.createElement (or by assigning a string containing HTML to an existing element's innerHTML property).
You add elements as children of other elements using appendChild or insertBefore.
So for instance, here's how you could add a row containing two table cells before the id="row2" in your table:
var newRow = document.createElement('tr');
newRow.appendChild(document.createElement('td')); // The first cell
newRow.appendChild(document.createElement('td')); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
However, as Heitor points out, for tables there are specific methods you can use instead which are a bit less verbose:
insertRow on table and tbody/thead elements
insertCell on row elements
Here's the code above using insertCell:
var newRow = document.createElement('tr');
newRow.insertCell(-1); // The first cell
newRow.insertCell(-1); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
We could also use insertRow:
var row2 = document.getElementById("row2"); // Get existing row
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row
newRow.insertCell(); // The first cell
newRow.insertCell(); // The second cell
...but then we'd be making changes to the displayed DOM repeatedly (adding a blank row, then adding a cell, then adding another cell), which is better avoided if possible. In the first two examples, we created the row and added its cells before adding that whole structure to the DOM, performing one live DOM manipulation.
The DOM API can be verbose and a bit awkward, and implementations of it can vary a bit browser to browser (though all of the above is reliable). You obviously can use it directly, but you can also use any of several good JavaScript DOM manipulation libraries to get some browser compatibility stuff sorted out for you, and to get a lot of useful utility functionality.
Use insertRow method, clean and precise!
var row = table.insertRow(0); // to insert in the top OR
var row = table.insertRow(N); // to insert in the (N+1)-th line of the table OR
var row = table.insertRow(-1); // to insert in the bottom
I have html table in a var and need to sum each row and put total in the last cell, and put the result back to the var (I need it for further programming for SharePoint). The table has fixed rows and TDs. JS or Jquery is fine. any Ideas. thank you
here is the var:
var A1='<table Id="AEid" width="85%" border="3"><tbody>
<tr><th><b>AM1</b></th><th><b>AM2</b></th><th><b>Total</b></th>
</tr><tr><td rowspan="1"></td><td rowspan="1"></td><td rowspan="1"></td></tr>
<tr><td rowspan="1"></td><td rowspan="1"></td><td rowspan="1"></td></tr></tbody></table>';
You can just create jquery object from your var without attaching to the DOM and manipulate it to heart's content.
var newText ='<table><tbody><tr><td>1</td><td>2</td><td></td></tr><tr><td>1</td><td>2</td><td></td></tr></tbody></table>';
$newDiv = $(newText);
You can refer to the jsfiddle I made. Not the best answer, but will do what you need http://jsfiddle.net/j5pKx/4/. Hope that helps
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
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