I have a .hta File containing JavaScript and HTML. My JavaScript Code modifies the HTML with functions like "appendChild", but the HTML does not get updated afterwards; Even if the element was corretly appended in the DOM-Structure (I can alert the .innerHTML, returning the html-code like it should be, but it doesn't show in the browser). If put in an HTML-File, it works completely fine.
<!DOCTYPE html>
<html>
<head>
<hta:application id="prjreq_v1" applicationname="ProjectRequirements">
<script>
function appendDiv(){
//Get the element that will get appended
var contentElement = document.getElementById("main_table");
//Create table row
var tr = document.createElement("tr");
tr.id = 0;
//Create table column
var td_0 = document.createElement("td");
td_0.id = "date";
td_0.innerText = "22/22/2222";
//Append
tr.appendChild(td_0);
contentElement.appendChild(tr);
//Alert outputs the modified HTML, but it doesn't show...
alert(contentElement.innerHTML);
}
</script>
</head>
<body>
<div id="content">
<table id="main_table">
<tr>
<th id="date">Date</th>
<th id="source">Source</th>
<th id="requirement">Description</th>
</tr>
<tr id="100">
<td id="date">dd/MM/yyyy</td>
<td id="source">Example1 Source</td>
<td id="requirement">Lorem Ipsum dolores est</td>
</tr>
</table>
</div>
<script>(function (){appendDiv();})();</script>
</body>
</html>
Internet Explorer has always been really picky about adding rows to tables. All browsers, however, assume that your table rows are contained in a <tbody> element, and it's valid for a table to have multiple <tbody> elements. (You can't see them on the screen; it's just a structural thing.)
Thus if you wrap your <tr> in a <tbody> and then append that to the <table>, it should work.
(I don't have IE readily available, but it might work if you were to explicitly include the <tbody> or else find the implicitly included one, and then target that with the .appendChild() call.)
Related
Data I received from database, Postgresql, is html content for rendering in browser, it is as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>CU0012</td>
<td>David</td>
<td>Jonh</td>
</tr>
untitle Name <!-- content I would like retrieve and manipulate -->
<tr>
<td>CU0010</td>
<td>Siv</td>
<td>Hellen</td>
></tr>
<tr>
<td>CU0009</td>
<td>Merry</td>
<td>Mug</td>
></tr>
</table>
</body>
</html>
Is it possible that I want to be able to get text untitle Name that is in table but outside of tr tag so that I can manipulate it thereafter?
As a mater of fact, after this html script rendered in browser, any content that is not wrap properly in table would be forced to get outside of table, yet before it rendering I would like to keep there by access to it and make it properly wrap into table.
<script>
$(document).ready(function(){
htmlTable = $('table tr').html();
htmlTable.each(function(){
// check element is in tr or not
});
})
</script>
How can I archive that in jQuery? Thanks.
When receive html content by ajax or other method, you can use String.prototype.replace() to remove the unexpected html content or replace with expected content before load it into one html element.
//for example, you receive below text from the server
var serverData = '<table border="1"><tr><td>CU0012</td><td>David</td><td>Jonh</td></tr>untitle name<tr><td>CU0010</td><td>Siv</td><td>Hellen</td></tr></table>';
function loadReviseHtml(){
var reviseData = serverData.replace(/<\/tr>\s*(.+)\s*<tr>/, '</tr><tr><td style="background-color:red">$1</td></tr><tr>');
console.log(reviseData)
document.getElementById('htmlcontainer1').innerHTML = reviseData;
}
function loadOrgHtml(){
document.getElementById('htmlcontainer1').innerHTML = serverData;
}
<a onclick="loadReviseHtml()" style="background-color:green;">Click me to load revised html!</a>
<div id="htmlcontainer1" style="background-color:gray;">
No Data!
</div>
<a onclick="loadOrgHtml()" style="background-color:red;">Click me to load org html!</a>
Im having trouble trying to sort a dynamically created html table. I create it using jade/pug. I am trying to use the sorttable.js script found here http://www.kryogenix.org/code/browser/sorttable/ . I am still kind of new to html/javascript. So if there is some obvious reason why its not working could someone point it out please?
Here is some of the html code generated from the template
<html>
<head>
<script src="/path/to/sorttable.js"></script>
<style>
th.clickable:hover
{
color:green
}
th, td
{
padding:5px;
}
th.clickable
{
cursor: pointer;
}
</style>
</head>
<body>
<script>
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
</script>
<table class="sortable" id="tbl">
<tr>
<th class="clickable">id</th>
<th class="clickable">value</th>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
</tr>
</table>
</body>
</html>
The goal is to have it so when I click on the header it sorts the table by that column.
Please excuse if this is already known...but
The script tag gets read and executed whenever the browser comes across it. Have you tried putting the script tag after your table?
At the time your code executes:
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
Your table hasn't rendered yet and is unavailable. So you;re passing undefined to the sorttable.makeSortable method. You can test this by adding a trace statement after you get the element:
var newTableObject = document.getElementById(tbl)
console.log(newTableObject)
You should wait to fire this code after your table has rendered. Something like this:
onLoad = function(){
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
}
and declare that like so:
// using jQ
$(document).ready( onLoad())
or for plain JS
<body onload="onload()">
Upon thorough research I was able to allow one data value to be edited and updated within my table. However, when I attempt to alter where the contenteditable can be edited, It removes my formatting of the table (it actually removes the table format completely, rendering my idea pointless.
Here is my current code.
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>IRC Name</th>
<th>Ingame Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[Cr|m|nAl]</td>
<td id="content2" contenteditable="true">Herbalist</td>
<td>Aeterna Top</td>
</tr>
<tr>
<td >2</td>
<td >bandido</td>
<td >Bananni</td>
<td >Aeterna Top</td>
</tr>
<tr>
<td>3</td>
<td>Funkystyle</td>
<td>Funkystyle</td>
<td>Aeterna Top</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button id="save">Save Changes</button>
<!-- begin the script -->
<script src="js/jquery.js" type="text/javascript"></script>
<script>
var theContent = $('#content2');// set the content
$('#save').on('click', function () { // store the new content in localStorage when the button is clicked
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if (localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage
theContent.html(localStorage.getItem('newContent'));
}
</script>
Now, ideally I would like it to output like this screenshot below;
http://i.imgur.com/R4TYhRB.png
With the column of "Ingame Name" editable.
Add Row/Remove Row, I'm wanting to implement too, but I'm not too sure if you can do it with such a simple HTML table.
My First question-
how would I make a particular row (i.e Ingame Name) be the only one editable? I'm terrible have Javascript/Jquery and my research unfortunately, only allows me to refine one row. (I know I could probably replicate the javascript/jquery, but surely there is an easier way?)
Second question-
Is it possible to actually add the ability for a HTML table to add/remove rows without having a database of some sort?
Thanks for any guidance in regards to this.
Rather than making td editable you could wrap div inside td and make it editable and assign fixed width and height to div.
.clEdit {
width: 200px;
/*Try chaging it as per need*/
overflow: hidden;
/* try scroll with more height */
height: 15px;
/*Try chaging it as per need*/
}
Now there are 2 options either allow overflow to be hidden or scroll. You could examine the behavior and select either one. As a user friendly experience you could assign tooltip to div on hover or click so that whenever values inside div are being overflown user could see what are the current values inside.
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
Yes you could add/delete rows from table without DB if you know the values. id can be calculated from previous id value.
Adding/removing from table does not guarantee DB will be updated you need handle that.
On adding rows you need to bind event for contenteditable as well.
$("#add").click(function() {
//LOGIC TO ADD ROW TO TABLE
var trRow = "<tr><td>" + ++idFirstCol + "</td><td>" + "SecondColValue" + "</td><td><div class='clEdit'>" + "ThirdColValue" + "</div></td> <td> " + "LastColValue" + " </td></tr>";
$("#ConTable").append(trRow);
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
$(".clEdit").prop('contenteditable', true);
});
You could refer to JSFiddle here. http://jsfiddle.net/8mt6d7bz/
Lmk if that answers your question
I created a table contain the colspan and rowspan. Then I would like to get or read these colspan and rowspan value. I'm doing this because I want to use it for xml generation. I need this value. I play around with this code to test:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("myHeader1").colSpan="2";
}
function displayColSpan()
{
var te;
document.getElementById("myHeader1").colSpan=te;
alert(te);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th id="myHeader1">Month</th>
<th id="myHeader2">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
<tr>
<td>March</td>
<td>$80.00</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Change colSpan for the first cell</button>
<button type="button" onclick="displayColSpan()">test</button>
</body>
</html>
Could you help me? Thanks!
There's a bit of confusion with your code.
This:
document.getElementById("myHeader1").colSpan=te;
Changes the colspan value of myHeader1 to var te, which is undefined. Instead you should do:
te = document.getElementById("myHeader1").colSpan
now te is the colspan value of myHeader1.
If you want to get the value, that is 'month':
te = document.getElementById("myHeader1").innerHTML
Now te has the value of 'month'!
Hope this helps!
The code you're using was copied from this site: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_th_colspan Isn't it?
Good, then you must have noticed that what they are doing there? They are simply changing the properties of the columns and their span, what we can say in css might be padding.
You want to get the value of the span? I never tried javascript for this, I have always used CSS.
But still, go through this page: Calculate and set colspan value dynamically
He showed a well developed code, you can also try out getting the values from element such as:
var val=document.getElementById("idofel").style.backgroundColor;
To get the background-color, you can try such other values for this table too. Obviously not background-color, but the necessary ones. And then write them in XML!
I am working on jQuery plugin.
It building tables dynamically.
// ... ...
var currentTBL = document.createElement('table');
$(currentTBL).attr('width', _width).attr('height', _height);
var currZoneIndex = 0;
for (var y = 0; y < limitRow; y++) {
var currentTR = document.createElement('tr');
var currentWidth = 0;
for (var x = 0; x < limitCol; x++) {
if (!opts.matrix[y * limitCol + x]) continue;
var currZone = opts.zones[currZoneIndex];
var cellSizes = getSizes(opts.zones[currZoneIndex]);
currentTD = document.createElement('td');
$(currentTD)
.attr('colspan', currZone.colspan)
.attr('rowspan', currZone.rowspan)
.attr('width', cellSizes.x)
.attr('height', cellSizes.y);
$(currentTR).append(currentTD);
currZoneIndex++;
}
$(currentTBL).append(currentTR);
}
// ... ...
This part of code gives me a table object and It's HTML is:
<TABLE width=470 height=150>
<TR valign="top">
<TD height=48 width=107 colspan="1"></TD>
<TD height=48 width=255 colspan="1"></TD>
<TD height=48 width=108 colspan="1"></TD>
</TR>
<TR valign="top">
<TD height=61 width=362 colspan="2"></TD>
<TD height=61 width=108 colspan="1"></TD>
</TR>
<TR valign="top">
<TD height=41 width=107 colspan="1"></TD>
<TD height=41 width=255 colspan="1"></TD>
<TD height=41 width=108 colspan="1"></TD>
</TR>
</TABLE>
It looks normally with FF, Opera, Safari,..:
IE7 || IE6 showing something like this:
(source: rayz.ru)
I have a solution which re-paste table on the same place. But it breaks all kind of event handlers on my table.
Please help me with solution.
Simplified plugin demo:
http://rayz.ru/stackoverflow/test/
The HTML you say the JQuery is rendering is valid and does render correctly in IE6/7/8. So my bet is that the JQuery code is producing something other than the HTML you have listed and the most likely candidate would be this line in the code you have provided:
var currZone = opts.zones[currZoneIndex];
I'd go back and look at how you defined this object opt.zones. I understand that it apparently renders OK in other browsers but my primary point is that, in IE, so does the HTML you listed...so thats not the problem. What does your HTML actually look like?
First things first: please make sure your plugin generates valid HTML - make sure all the elements are in lowercase and that all your elements' attributes are enclosed in double quote marks.
I'd suggest that for ensuring the widths, heights and other stylistic elements, you use a stylesheet as part of your plugin. That will make it simpler to control the appearance of your table overall.
For defining column (cell) widths, try creating a <colgroup> element that can be inserted right after your <table> element.
<table>
<colgroup>
<col style="width: 107px;" />
<col style="width: 255px;" />
<col style="width: 108px;" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
...
</table>
That will clean things up a bit and make it easier to identify what IE is misinterpreting.
Firstly don't do this in IE6 - your code will be prone to a nasty issue in IE6 called the DOM insertion order bug: http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx.
Basically in IE6 you can't build up your table and then add it to the page (like any good developer would - why fire extra page layouts?) you have to add the table to the page, then add a row, then add a cell - all top down and forcing a layout each time. Nasty.
Your HTML looks like it would render correctly in IE7, so I'd look at the javascript - are you sure that it's producing that HTML in all browsers? For instance document.createElement('td') shouldn't create <TD> tags with unquoted attributes.
So either in IE7 (with a plugin) or IE8 (which finally has developer tools) I'd investigate the DOM actually produced.
At least IE6 is very bad with empty cells. Adding an to each cell helps.
Solution is setting rowspan and colspan attributes of TD elements directly in javascript object properties, not with .attr method of jQuery.
That's wrong:
$(currentTD)
.attr('colspan', currZone.colspan)
.attr('rowspan', currZone.rowspan);
That's correct:
currentTD.colSpan = currZone.colspan;
currentTD.rowSpan = currZone.rowspan;