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,'.')
Related
I have a web page that is auto-generated by a CRM (Netsuite) and I do not control the html generated in a fair amount of the page. I would like to remove a handful of closing and opening tags, so that objects are rendered in the same row vs. in rows above and below each other.
</tr></tbody></table></td>
</tr>
<tr valign="top">
<td width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
The problem I have is that doing the following breaks the forms on the page, causing all of the buttons to fail:
<script type="text/javascript">
$(document).ready(function()
{
var bodyHtml = document.getElementById('content_area').outerHTML;
bodyHtml = bodyHtml.replace('</tr></tbody></table></td>\n</tr>\n<tr
valign="top">\n<td width="100%"><table border="0" cellpadding="0"
cellspacing="0" width="100%"><tbody><tr>','<!-- worked -->');
document.getElementById('content_area').outerHTML = bodyHtml;
});
</script>
Is there another way to remove html tags via javascript that doesn't mal-form the rest of the dom?
The following code will take the example from your comment, and append the content 2 td right after the content 1 td
let contentOne = document.querySelector("table:nth-of-type(1) tr td");
let contentTwo = document.querySelector("table:nth-of-type(2) tr td");
contentOne.insertAdjacentElement('afterend', contentTwo);
tr td {
border: 1px solid black
}
<table>
<tr>
<td>content 1</td>
</tr>
</table>
<table>
<tr>
<td>content 2</td>
</tr>
</table>
Couple of points to note, you may want to change the selectors. Make use of IDs if you can.
Secondly, you may want to clear up the empty table / rows when your done.
I am using an asp.net repeater and bind data from SQL through a data table. I would like to modify the hyperlink on the client side based on the DataRow. There can be several other hyperlinks in the table but I have to process the one in the second column alone. What is the best way to do that? Any code sample is highly appreciated.
<table border="0" cellpadding="2" cellspacing="0" width="100%" id="myTable">
<tr>
<td align="left">ID</td>
<td align="left">DESCRIPTION</td>
<td >STATUS</td>
</tr>
<tr>
<td>10</td>
<td>
<span style="color: Red; font-weight: bold">Server is Down</span>
Click here to continue.
</td>
<td>No Response</td>
</tr>
</table>
You could use the following jQuery to change all links in the 2nd column of the 2nd row:
$(document).ready(function() {
$('#myTable tr:nth-child(2) td:nth-child(2) a').each(function() {
var someValue = '/2';
$(this).prop('href', someValue + $(this).prop('href'));
});
});
The issue here is where you'd get that someValue from. You'll have to somehow add this to the output using your <asp:Repeater>.
You could place it as a data attribute inside the <td>, something like this:
Repeater output
...
<td data-id="2">
<span style="color: Red; font-weight: bold">Server is Down</span>
Click here to continue.
</td>
...
JS
var someValue = '/' + $(this).parent().data('id');
Web application using jQuery, I want to add pagination. It works well on Firefox & Chrome. But on IE 8 it can't calculate the number of rows.
this.init = function () {
var rows = document.getElementById(tableName).rows;
var records = (rows.length);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
rows returning 0 in IE 8 but all other browser giving correct row count.
I am appending the html table to DIV
Following is the html created of my table
<TABLE style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class="pad white" border=0 cellSpacing=1 cellPadding=1 width="100%">
<TBODY>
<TR>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>#</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Date</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Customer</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="30%">
<DIV align=center><STRONG>Description</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Status</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Amount</STRONG></DIV></TD></TR></TBODY></TABLE>
<DIV class=border-middle>
<TABLE id=**tblIncomeListData** class=pad border=0 cellSpacing=0 cellPadding=0 width="100%">
<TR class=even jQuery172016229059503345766="72">
<TD style="DISPLAY: none" vAlign=top width=0% align=middle>30</TD>
<TD vAlign=top width="10%" align=middle>00001</TD>
<TD vAlign=top width="10%" align=middle>May 28, 2013</TD>
<TD vAlign=top width="20%" align=middle>test1</TD>
<TD vAlign=top width="30%" align=middle>Other Income </TD>
<TD vAlign=top width="10%" align=middle>Paid</TD>
<TD style="TEXT-ALIGN: right" vAlign=top width="20%">OMR444.00</TD></TR></TABLE></DIV>
That's odd, I thought IE8 supported the rows property. (Edit: It does: http://jsbin.com/ocufuf/1 Still, I'll leave this in place for now...)
Unless you have a table nested within that table (and it doesn't look like you do), you can replace it with getElementsByTagName:
var rows = document.getElementById(tableName).getElementsByTagName('tr');
Or of course, with jQuery (since you say you're using it, although it's not apparent from your code samples):
var rows = $("#" + tableName + " tr");
Note that if you do that, you'll have to change your table name, as **tblIncomeListData** is a valid id for HTML, but not for CSS.
If you were doing nested tables, you could still get the count easily with jQuery:
var rows = $("#" + tableName).children('thead, tbody, tfoot').children('tr');
document.getElementById(table).getElementsByTagName("tr").length
Since you are using Jquery, use the following code for getting the number of rows.
var rows = $('#tableId tr').length;
Also note that after getElementById, you have used tableName variable.
Don't know if you are storing the id of the table in that variable but ideally the ID of the table element has to be passed if you are using getElementById or #tableId.
Hope this would help.
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.
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.