i want to load a html table in a div
The HTML-Code is loaded via:
$("#table_wrapper").hide();
$.get("<?echo base_url();?>schichtplan/employee_fields/"+plan_id+"true",function(data){
$("#table_wrapper").html(data);
$("#table_wrapper").show();
});
Data is validated via alert and looks like:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' />
<thead>
<tr>
<th> </th><th><div id='plan_id:1;sort_id:1' class='edit_employee'>User1</div></th><th><div id='plan_id:1;sort_id:2' class='edit_employee'>User2</div></th></tr>
</thead>
<tbody>
<tr>
<td class='first'>Anstellung</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Stundenlohn</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Festlohn</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Bonus</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Kassenminus</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Nachtzuschlag</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Sonstiges</td><td> </td><td> </td></tr>
</tbody>
</table>
After the JQuery-Action the div looks like:
<div id="table_wrapper" style="display: block; "><table border="0" cellpadding="4" cellspacing="0" class="mitarbeiter"></table>
<div id="plan_id:1;sort_id:1" class="edit_employee">User1</div><div id="plan_id:1;sort_id:2" class="edit_employee">User2</div>
Anstellung
Stundenlohn
Festlohn
Bonus
Kassenminus
Nachtzuschlag
Sonstiges
</div>
Table-Code is generated with CodeIgniter.
I have no idea why the result looks like that
Some hint?
Thanks
There is a slash at the end of the tag that starts the table. Only some tags can be closed with the slash, and if a tag isn't allowed to have the slash, it will be kept open for the rest of the page, which will make your html invalid. This is what it should look like:
<table border='0' cellpadding='4' cellspacing='0' class='mitarbeiter'>
<thead>
<!-- ... -->
</thead>
<tbody>
<!-- ... -->
</tbody>
</table>
It looks like your Table-Code is rendered NOT COMPLETELY LIKE HTML but table renders like normal view. Check is there any config option for Table-Code module to generate FULL HTML table.
Which method do you use to render table?
Just noticed - the table is self closed on the first line:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' />
Should be:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' >
I strongly suspect this is your problem sir.
Related
Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>
you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.
I was checking the site and found JavaScript: How to strip HTML tags from string? but this doesn't really explains how to take this:
<tr id="element.incident.comments.additional">
<td colspan="2">
<span style="">
<table cellpadding="0" cellspacing="0" style="table-layout:fixed" width="100%">
<tbody>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
<tr style="">
<td class="tdwrap"><strong>2014-01-23 14:45:40 - <a style="color:blue" href="sys_user.do?sysparm_view=itil&sysparm_query=user_name=Superhero#superhero.com">SuperHero</a></strong></td>
<td align="right" nowrap="true"><sup>Additional comments</sup></td></tr>
<tr style="">
<td colspan="2"><span style="word-wrap:break-word;">received from: SDUperhero#superhero.com<br><br>lalalalalala
<br>lotsofwords<br><br><br><br><br><br>
The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material</span></td></tr></tbody></table></span></td>
</tr>
and get the text inside:
<tr id="element.incident.comments.additional">
for further parsing.
I tried with
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
var commentsField = document.getElementById("element.incident.comments.additional").innerHTML;
alert(strip(commentsField));
but I'm not sure if this is the right way as I'm not getting anything in the alert.
Any thoughts?
Because you have . in your ids, you will need to escape them in your jQuery selector:
$("#txt").val($("#element\\.incident\\.comments\\.additional").html());
and that should work.
jsFiddle: http://jsfiddle.net/hescano/EQ9b3/
I want to determine that whether any html table on the webpage has the tags present or not. If it not present , I want to insert the colgroup tag in the html. I have got the table object in the javascript but I dont find any way to solve this problem. Please help !!!
See http://jsfiddle.net/jv5yQ/
Just use .getElementsByTagName('colgroup'):
HTML:
<table id="t1">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
<table id="t2">
<colgroup style="background-color:#F00"></colgroup>
<colgroup style="background-color:#00F"></colgroup>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
JavaScript:
var ids=['t1','t2'];
for(var i=0;i<ids.length;i++){
var el=document.getElementById(ids[i]),
cond=el.getElementsByTagName('colgroup').length===0;
if(cond){
var col1=document.createElement('colgroup'),
col2=col1.cloneNode(false);
col1.style.background='#0f0';
col2.style.background='#f0f';
el.insertBefore(col2,el.firstChild);
el.insertBefore(col1,el.firstChild);
}
}
Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?
CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...
Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.
The following code worked fine in IE7 until I started using IE9.js file. The IE9.js file adds an additional class "ie7_class82" to the already present classes which I added. The code below stopped working in IE7. Is there a known issue with not able to find matching classes with jQuery when multiple classes are present?
--------------HTML code skeleton-------------
<table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%">
<thead>
---table rows here----
</thead>
<tbody>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left">
<thead>
<tr style="text-align:left;">
<td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px">
<span><label class="quarterly">Quarterly</label></span>
<span style="padding:5px">|</span>
<span><label class="monthly">Monthly</label></span>
<span style="padding:5px">|</span>
<span><label class="daily">Daily</label></span>
</td>
</tr>
</thead>
<tbody>
---table rows here----
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly">
---table rows here---
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="monthly">
---table rows here---
</table>
</td>
</tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="daily">
---table rows here---
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
---------jQuery code--------------
$('table thead span label').click(function() {
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + this.className).show();
$(this).parents('table').parents('table').find('table.' + this.className).show();
});
Note: Unfortunately no errors in IE7(and works fine in FF and Chrome). It is supposed to hide all the tables and show only the ones which match the class name that is present in the label tag. IE7 hides all the tables but fails to show the tables that match the class.
Updated code(that works in IE7, thanks to SO):
$('table thead span label').click(function() {
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join(',');
$('label:not('+classSelector+')').css('color','#00425f');
$(this).css('color','#d6c9b9');
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + classSelector).show();
$(this).parents('table').parents('table').find('table.'+ classSelector).show();
});
this.className returns the actual class attribute which, in ie7's case, because of the ie9.js file, contains more than one class.
This means that a selector like the one you use :
'table.' + this.className
will be translated into:
'table.yourClassName ie7_class82'
which is not a valid jquery (or css) selector.
I suggest you replace this.className with something like :
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join('.');
which means that :
'table.' + classSelector
will be translated into :
'table.yourClassName.ie7_class82.some-other-classes-if-any'
Like one comment mentioned, 'tbody tr.' + this.className will generate an invalid selector if this has more than one class.
It's a little confusing why you're trying to get a row that has a class equal to the label you're clicking on. Perhaps take a look at the DOM navigation methods of jQuery. Specifically parent and parents:
http://api.jquery.com/parent/
http://api.jquery.com/parents/
If you absolutely must do what you're trying to do, then the fix would be to replace spaces with periods in this.className. So you could modify your code to do this:
'tbody tr.' + this.className.replace(/ /g,'.')