Remove all images from a table and insert it before - javascript

I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.

You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO

I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.

Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!

You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>

Related

HTML tags get changed when assigning to innerHTML

I have an XML and i m transforming it to HTML using XSL. My transformation is successful and i am geting the resultant string like below :- `
<TABLE xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xslscript="http://mycompany.com/mynamespace" border="0" width="100%">
<TR align="center">
<TD>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<FORM action="jhk" method="get" id="frmMain" name="frmMain">
<TR>
<TD class="tableBg">
<TABLE border="0" cellspacing="1" cellpadding="3" width="100%">
<TR class="mainListRow">
<TD colspan="7">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD class="ListTableTitle" width="12%" nowrap="nowrap">Select Value </TD>
</TR>
</TABLE>
</TD>
</TR>
<TR width="100%">
<TD valign="top" width="100%">
<DIV id="listing" width="100%">
<input type="hidden" id="keyField" value="partnerCd"/>
<TABLE STYLE="background-color:white" id="tblList" border="0" bordercolor="#0099CC" cellspacing="0" width="100%">
</THEAD>
<tr>
<TD align="center" width="8px" height="10px"/>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" class="text" name="searchFields" value=""/></td>
</tr>
</table>
</TD>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td/>
<td align="right"><input type="button" class="buttonsNewCancelDeleteClose" id="buttonsSearchId" name="buttonsSearch" value="Search" onclick="searchPaginated()"/></td>
</tr>
</table>
</TD>
</tr>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr class="tableFooter">
<td class="tableFooter" align="left" width="10%"/>
<TD class="tableFooter" id="tableFooter" width="90%" align="right"/>
</tr>
</table>
</td>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
</TABLE>
`
then i am assigning it to the innerHTML of Document..
but the form tag is closing in the same line after assignment. like below
<FORM action="jhk" method="get" id="frmMain" name="frmMain"></FORM>
Not able to understand why the tags are rallying.Can anyone please help .I am not able to find any missmatch.
thanks
A <form> can not be inside a <table>.
Either place it around the <table> or in a <td>
In addition, you have a stray </THEAD> tag on line 24 of your sample HTML. This stray tag results in invalid markup, which could be causing the symptoms you're seeing.

Asp page not running in firefox or chrome

I have a classic asp page which is working on IE and safari but not in firefox or chrome. Have a look at this url
Check it
My Asp Page code is
<HTML>
<HEAD>
<TITLE>USER LOGIN</TITLE>
<script language="JavaScript">
<!--
function SetFocus() {
var field = document.forms("Form1").item("txtUserID");
field.select();
field.focus();
}
//-->
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
.v8Blue{ font-family:Verdana; font-size:8pt; color:#1E3B51;}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table width="75%" border="0" align="center">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td align="center">
<%
' Check if User has previously rejected by the Server for invalid Log On
If Session("RequestLogOnSuccess_Delphi") = "NO" then
Response.Write "<table width='100%' border='0' cellspacing='0' cellpadding='0'>"
Response.Write "<tr>"
Response.Write "<td align='center'><font face='Arial, Verdana, Times New Roman' size='2' color='#CC0000'>YOUR LOG ON IS INVALID. PLEASE TRY AGAIN.</font></td>"
Response.Write "</tr>"
Response.Write "</table>"
else
Response.Write "<p> </p>"
End if
%>
</td>
</tr>
</table>
<form method="post" action="../Request_WebProcess/Request_LogOn_Process.asp" name="Form1">
<table width=23% border=0 cellpadding=0 cellspacing=0 align="center" height="119">
<tr>
<td colspan=7> <img src="images/login_01.jpg" width=370 height=58 alt=""></td>
</tr>
<tr>
<td width="35" rowspan=4> <img src="images/login_03.jpg" width=35 height=83 alt=""></td>
<td colspan=2>
<div align="center">
<input name="txtUserID" type="text" class="v8blue" id="username" size="15">
</div>
</td>
<td width="12" rowspan=2> <img src="images/login_05.jpg" width=12 height=27 alt=""></td>
<td colspan=2>
<div align="center">
<input name="txtPassword" type="password" class="v8blue" id="password" size="15">
</div>
</td>
<td width="64" rowspan=4> <img src="images/login_07.jpg" width=54 height=83 alt=""></td>
</tr>
<tr>
<td colspan=2> <img src="images/login_08.jpg" width=133 height=4 alt=""></td>
<td colspan=2> <img src="images/login_09.jpg" width=136 height=4 alt=""></td>
</tr>
<tr>
<td width="100" rowspan=2> <img src="images/login_10.jpg" width=100 height=56 alt=""></td>
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms('Form1').submit()"></td>
<td width="99" rowspan=2> <img src="images/login_12.jpg" width=99 height=55 alt=""></td>
</tr>
<tr>
<td colspan=3 height="21"> <img src="images/login_13.jpg" width=82 height=26 alt=""></td>
</tr>
<tr>
<td colspan=7 height="2"> <img src="images/login_14.jpg" width=370 height=20 alt=""></td>
</tr>
<tr>
<td colspan=7> </td>
</tr>
<tr>
<td width="35"> <img src="images/spacer.gif" width=35 height=1 alt=""></td>
<td width="100"> <img src="images/spacer.gif" width=100 height=1 alt=""></td>
<td width="33"> <img src="images/spacer.gif" width=33 height=1 alt=""></td>
<td width="12"> <img src="images/spacer.gif" width=12 height=1 alt=""></td>
<td width="38"> <img src="images/spacer.gif" width=37 height=1 alt=""></td>
<td width="99"> <img src="images/spacer.gif" width=99 height=1 alt=""></td>
<td width="64"> <img src="images/spacer.gif" width=54 height=1 alt=""></td>
</tr>
</table>
<table width="70%" border="0" align="center">
<tr align="center">
<td width="51%" height="12"> </td>
<td width="49%" height="12"> </td>
</tr>
<tr align="center">
<td colspan="2"><img src="../Delphi_Logo.gif" width="397" height="77"></td>
</tr>
<tr align="center">
<td colspan="2"><font face="Arial, Helvetica, sans-serif" size="4"><font face="Georgia, Times New Roman, Times, serif"><font face="Arial, Helvetica, sans-serif" size="4"><font face="Georgia, Times New Roman, Times, serif"><font color="#CC9933" size="5"><font size="4" color="#000000" face="Arial, Helvetica, sans-serif">SINGAPORE
INTERNET PURCHASE</font></font></font></font></font></font></td>
</tr>
</table>
<table width="63%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td><font face="Arial, Helvetica, sans-serif" size="4"><i><font face="Arial, Helvetica, sans-serif" color="#993333" size="2">(Please
log in your user name and password ) </font><font face="Georgia, Times New Roman, Times, serif" color="#993333"></font></i></font></td>
</tr>
<tr align="center">
<td> </td>
</tr>
<tr align="center">
<td><font face="Arial, Helvetica, sans-serif" size="2"><a href="ForgetPassword.asp">CLICK
HERE IF YOU FORGET YOUR PASSWORD</a></font></td>
</tr>
<tr align="center">
<td> </td>
</tr>
<tr align="center">
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="97">
<tr>
<td height="70"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</BODY>
</HTML>
Did you check the browser's console? This is the error that Chrome reports:
Uncaught TypeError: Property 'forms' of object #<HTMLDocument> is not a function
Change this line:
var field = document.forms("Form1").item("txtUserID");
to be:
var field = document.forms["Form1"]["txtUserID"];
// or
var field = document.forms.Form1.txtUserID;
Or I would probably do this:
var field = document.getElementById("username");
I have got the solution
Changed
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms('Form1').submit()"></td>
To
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms[0].submit()"></td>

Table cells that activate other tables with Javascript by changing the z-index

I have no idea how this isn't working. I've tried switching around the properties, putting divs inside each table cell and using that for the "click" function. But no matter what I do I just can't seem to get it working. All i need is just the table cell with the weblink info in it, to click and open up the secondary table using the z-index format to overlap them. If anyone can help it would be much appreciated.
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#weblinkbut').click(function(){
$('.menuhome').css('z-index','3');
$('.weblinkmenu').css('z-indez','4');
});
</script>
</head>
<body>
<div id="weblinkbut">
<p>content</p>
</div>
<div id="menuhome">
<table class="menuhome" width="181" height="208" border="1"
bordercolor="#000000" cellspacing="5" bgcolor="#FFFFFF" cellpadding="">
<tr>
<td width="75" height="90"><p> </p><p><img src="images/weblinkicon.png"
width="40" height="40"></p>
<p>Website link</p></div></td>
<td width="75" height="90"><p><img src="images/phoneicon.png"
width="40" height="40"></p>
<p>Phone Number</p></td>
</tr>
<tr>
<td width="75" height="90"><p><img src="images/emailicon.jpg" width="40"
height="40"></p>
<p>Email address</p></td>
<td width="75" height="90"><p><img src="images/newdocicon.png" width="30"
height="40">
<P>Plain Text</P>
</tr>
</table>
</div>
<div id="weblinkmenu">
<table class="weblinkmenu" width="181" height="208" border="1"
bordercolor="#000000" cellspacing="5" bgcolor="#FFFFFF" cellpadding="">
<tr>
<td width="75" height="90"><p><img src="images/weblinkicon.png"
width="40" height="40"></p>
<p>Website link</p></td>
</tr>
</table>
</div>
</body>
</html>
Your DOM isn't fully loaded when you try to bind a handler for the click event.
Try:
$(document).ready(function(){
$('#weblinkbut').click(function(){
$('.menuhome').css('z-index','3');
$('.weblinkmenu').css('z-indez','4');
});
});

Jquery apending <tr> to table closing the <tr> tag unexpectedly [duplicate]

This question already has answers here:
jQuery appended table adds closing tag at the end of the text automatically. Why?
(4 answers)
Closed 9 years ago.
I am using jquery append method to add <tr> inside the <tbody>. I have to get the following table structure
<table>
<tbody>
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I have to add a class to <tr> and inside its contents dynamically. And i am doing it via jquery append method.
But the problem is that when appending the <tr> after appending the first <td> the <tr> is getting closed. I need to insert three <td> inside <tr> and close that. So what's wrong with this code?
With .append() you're not adding tags, you're adding DOM objects. What you want to do is then append the <td>s to the newly created <tr>, like so:
var tr = $('<tr>');
// Add the row to the table
$('table tbody').append(tr);
// Add cells to the new row
tr.append('<td>1</td>');
tr.append('<td>2</td>');
tr.append('<td>3</td>');
$('#tb tbody tr').first().append(' <td> add td </td>');
$('#tb tbody').append('<tr><td> add tr </td></tr>');

Searching a content and alert if

I made a search script which searches for "Hallow" and alerts.
var Item = $('td > a:contains("Hallow")').text()
if(Item) {
alert(Item); }
This javascript is working for this html:
<html><body><div style="Padding:10px;">
<table width="469" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr valign="top">
<td width="313"> <img width="11" height="10" src="graphics/Default/Miscellaneous/weight.gif" alt="Yük: 3" title="Yük: 3">
Kovboy çizmeleri </td>
<td width="140" align="right"> </td>
</tr>
<tr valign="top">
<td width="313"> <img width="11" height="10" src="graphics/Default/Miscellaneous/weight.gif" alt="Yük: 5" title="Yük: 5">
Halloween Canavar Maskesi
</td>
<td width="140" align="right">
</td>
</tr>
</tbody></table>
<table width="469" cellspacing="0" cellpadding="3" border="0">
</table>
<br>
<br>
</div></body></html>
But sometimes item is secured. And html is like this:
<html><body><div style="Padding:10px;">
<table width="469" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr valign="top">
<td width="313"> <img width="11" height="10" src="graphics/Default/Miscellaneous/weight.gif" alt="Yük: 3" title="Yük: 3">
Kovboy çizmeleri </td>
<td width="140" align="right"> </td>
</tr>
<tr valign="top">
<td width="313"> <img width="11" height="10" src="graphics/Default/Miscellaneous/weight.gif" alt="Yük: 5" title="Yük: 5">
Halloween Canavar Maskesi
</td>
<td width="140" align="right">
Secured
</td>
</tr>
</tbody></table>
<table width="469" cellspacing="0" cellpadding="3" border="0">
</table>
<br>
<br>
</div></body></html>
I dont want my javascript to alert me if item is secured.
Function must be like that
var Item = $('td > a:contains("Hallow")').text()
var Itemsecured = (A code)
if(Itemsecured) {
}
else {
alert(Item)
}
I need the correct version of this code.
And this is important: I have two items, one is secured other is not. Javascript must alert me.
Don't store semantic information in a sibling; add a class.
var Contents = $('td:not(".secured") a:contains("Hallow")').text()
if( Contents ) alert( Contents )
$('td > a:contains("Hallow")').each(function(){
if($(this).parent().next('td').text() == 'Secured') {
// actions for secured item
}
else {
alert($(this).text());
}
});

Categories