[jQuery] wrap, before, after all not working with table data
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:Consolas;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:Consolas;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoPlainText>Hey guys, does Jquery not get along with complex HTML
table wrapping or handling?<o:p></o:p>
<p class=MsoPlainText>I posted this last night, and haven’t heard
anything.<o:p></o:p>
<p class=MsoPlainText>Here is the source code: http://www.ryandoom.com/Portals/5/PhotoDrop.zip<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I have been playing with Jquery for about a week now and
have had a lot of success with it, however I'm trying to put a border around a
photo.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>This is my HTML<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><img class="Photo"
src="photodrop/woman.jpg"/><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Here is my Ready data<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText> $(".Photo").before("<table
border='0' cellpadding='0' cellspacing='0'
width='1'><tr><td><img
src='photodrop/topLeft.jpg'></td><td
background='photodrop/topBG.jpg' align='right'><img src='photodrop/topMiddle.jpg'></td><td><img
src='photodrop/topRight.jpg'></td></tr><tr><td
background='photodrop/leftBG.jpg' valign='top'><img
src='photodrop/leftMiddle.jpg'></td><td>").after("</td><td
valign='bottom' background='photodrop/rightBG.jpg'><img src='photodrop/rightMiddle.jpg'></td></tr><tr><td><img
src='photodrop/botLeft.jpg'></td><td
background='photodrop/botBG.jpg' align='left'><img
src='photodrop/botMiddle.jpg'></td><td><img
src='photodrop/botRight.jpg'></td></tr></table>");<o:p></o:p>
<p class=MsoPlainText> <o:p></o:p>
<p class=MsoPlainText>The above inserts the border etc but my second row has no
middle column, the center td are killed, and the img of the woman doesn’t
get the border around it. <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Ive also tried using the wrap command which fails in its
own different way. Is there some problem with the above HTML ? I know a maze of
Divs would probably be better but the border is pretty complex.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Thoughts? <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Ive' also tried this simple example<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>$(".Photo").before("<table border='0'
cellpadding='0' cellspacing='0' width='1'><tr><td>x
</td><td>").after("</td><td>y</td></tr></table>");<o:p></o:p>
<p class=MsoPlainText> <o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>This doesn't work as expected either, in the DOM all the
table data is before the IMG, only the y is after, but it is mal formed in the
DOM.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>If anyone has any insight, that would be great.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Thanks<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/