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.
Related
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 a table as follows:
<table>
<tr>
<td>col 1</td><td>col2</td>
</tr>
<tr id="insert">
<td>field</td><td>Field 2</td>
</tr>
<tr>
<td>another field</td><td>one more field</td>
</tr>
</table>
Now the issue is that I need to dynamically insert new rows AFTER the middle row (id = insert). I have a custom javascript function to insert elementsAFTER an element by using an insertBefore call on the next element.
The new rows create successfully using the following javascript:
var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);
However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:
<tr>test</tr>
You see it doesn't want to output the I have specified. The actual script is a lot more complex and so unfortunately manually adding each using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?
I'm baffled, any help is MUCH appreciated.
You can use the native insertCell() method to insert cells.
Give this a try:
Example: http://jsfiddle.net/VzTJa/
var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";
or you can accomplish it without your insertAfter() function by using insertRow() as well.
Example: http://jsfiddle.net/VzTJa/1/
var insert = document.getElementById("insert");
var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";
Give this workaround a try:
Example: http://jsfiddle.net/VzTJa/2/
var temp = '<table><tbody><tr>';
var close_temp = '</tr></tbody></table>';
var temp_div = document.createElement('div');
var html_to_insert = '<td>tester</td><td>tester</td>';
temp_div.innerHTML = temp + html_to_insert + close_temp;
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild);
temp_div.removeChild(temp_div.firstChild);
Basically creates a couple strings representing the opening and closing tags of a table. You concatenate it with your content, and set it as the innerHTMl of a temporary div, then fetch the row you want, and do an .appendChild().
There may be a better way, or you may find a way to improve this one.
I came up with this after glancing at a solution in this article from a guy who apparently worked on IE and is partly responsible for the parser.
If you can use jQuery, try the append method from it. jQuery append reference
If you do find performance to be an issue, you might find an improvement by building up the dynamic DOM you want to add in javascript before appending it to the actual HTML DOM element that will make it visible. This will keep your number of repaints to a minimum.
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.
For chrome, firefox, and safari the following code seems to work and be able to retrieve the id of the last tr in a table.
var table = document.getElementById( tableId );
var rowid = table.lastChild.lastChild.id;
The goal is to use each rows id to keep track of what row number it is. I am using javascript to dynamcially add and remove rows. The problem is that I need a unique identifier for each row so that rows can be removed. If say there are 4 rows and row 2 is removed, the count will be 1, 3, 4. If another row is added, it can't be 4 or there will be duplicate 4's. The correct way would be to renumber everything, (but there are many elements in each row tied to their count, thus making it near hard to re-number)
Is there a better way to be doing this? Or is there a simple fix for IE javascript?
try this:
var table = document.getElementById( tableId );
var trArr = table.getElementsByTagName('tr');
var tdArr = trArr[trArr.length - 1].getElementsByTagName('td');
var rowid = tdArr[tdArr.length - 1].id;
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