将表放入jquery
我是jquery新手，坦率地说，我在编码方面相当糟糕。 我正在制作一个学校作业的网站，我需要在“票证”选项卡上放一张表格 我已经在一个不同的文档上创建了这个表，正如向我建议的那样。但是当我试图把它放进我的代码中时，它不起作用 要么我把它放错地方了，要么我把桌子做错了 以下是表格的代码：将表放入jquery,jquery,Jquery,我是jquery新手，坦率地说，我在编码方面相当糟糕。 我正在制作一个学校作业的网站，我需要在“票证”选项卡上放一张表格 我已经在一个不同的文档上创建了这个表，正如向我建议的那样。但是当我试图把它放进我的代码中时，它不起作用 要么我把它放错地方了，要么我把桌子做错了 以下是表格的代码： <table width="200" border="1"> <tbody> <tr> <td> </td>
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td><p>Super Early Bird</p>
<p>Ends Dec 23, 2018 </p></td>
<td><p> Early Bird</p>
<p>Ends Mar 3, 2019 </p></td>
<td><p> Regular</p>
<p>After Mar 3, 2019 </p></td>
</tr>
<tr>
<td><p>Conference</p>
<p>The most popular option.</p>
<p>(Price listed is per ticket) </p></td>
<td>$599 </td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Conference- 4 Packs</p>
<p>Buy 4 at once and SAVE.</p>
<p>(Price listed is per ticket) </p></td>
<td>$499</td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>Freelancer</p>
<p>A full 3 day conference ticket for thise who do not work full time for a single company or client </p></td>
<td> $399</td>
<td> $499</td>
<td> $599</td>
</tr>
<tr>
<td> Non-Profit/ Academic/ Military/ Government Discount <br>
<br>
A full 3 day conference ticket that is discounted for those who work at an NFP, a school, or the government or military. *Proof of employment required.</td>
<td>$499 </td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>The WORKS </p>
<p>Includes the 3 day conference (April 29-May 1, 2019) plus the workshop day (April 28) </p></td>
<td>$799 </td>
<td>$899 </td>
<td>$999 </td>
</tr>
<tr>
<td><p>FITC EXCLUSIVE - </p>
<p>New for 2019 </p>
<p>• Very limited quantity</p>
<p> • Access to Exclusive sessions</p>
<p> • Invites to Exclusive Parties</p>
<p> • Exclusive swag</p>
<p> • Skip the line pass pickup </p>
<p>• Extra drink tickets for evening events </p>
<p>• Plus more exclusive perks to be revealed! </p></td>
<td>$899 </td>
<td> $999</td>
<td> 1099</td>
</tr>
<tr>
<td><p>FLEX </p>
<p>A transferable conference ticket. (April 29-May 1, 2019) </p></td>
<td> $699</td>
<td> $799</td>
<td>$899 </td>
</tr>
<tr>
<td><p>FLEX - 4 Pack Buy </p>
<p>4 tickets and save. (Price listed is per ticket) </p></td>
<td> $599</td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Workshop Only </p>
<p>Access to one of our workshops (April 28). $199 $249 $349 </p></td>
<td> $199</td>
<td>$249 </td>
<td>$349 </td>
</tr>
<tr>
<td>One Day Only <br>
Attend one day of FITC Toronto 2019. Includes access to all three evening events. </td>
<td>n/a </td>
<td> n/a</td>
<td>$399 </td>
</tr>
</tbody>
</table>
超早起鸟
完2018年12月23日
早起的鸟儿
完2019年3月3日
正规的
2019年3月3日之后
会议
最受欢迎的选择
（所列价格为每张票）
$599
$699
$799
会议-4套
一次买4个，然后存钱
（所列价格为每张票）
$499
$599
$699
自由职业者
非全职为一家公司或客户工作的员工的3天会议门票
$399
$499
$599
非盈利/学术/军事/政府折扣
在NFP、学校、政府或军队工作的人可以享受3天的会议门票折扣*需要提供就业证明。
$499
$599
$699
作品
包括为期3天的会议（2019年4月29日至5月1日）和研讨会日（4月28日）
$799
$899
$999
FITC独家-
2019年新增
•数量非常有限
•访问专用会话
•邀请专属缔约方
•独家swag
•跳过线路通道拾取
•晚间活动的额外酒票
•此外，还将推出更多独家优惠
$899
$999
1099
弯曲
可转让的会议票。（2019年4月29日至5月1日）
$699
$799
$899
FLEX-4件套购买
4张票，省钱。（所列价格为每张票）
$599
$699
$799
仅车间
访问我们的一个研讨会（4月28日）$199美元249美元349美元
$199
$249
$349
只有一天
参加2019年多伦多国际贸易中心一天的活动。包括访问所有三个晚间活动。
不适用
不适用
$399
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>jQuery Set</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style>
body{
font-family: 'Open Sans', sans-serif;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
background-color:#376b82;
}
.butters{
width:140px;
height:140px;
background-image:url(http://placehold.it/140x140);
margin: 10px auto 5px auto;
cursor:pointer;
}
#btn1{
background-image:url(a2Resources/icons4/speakers.png);
}
#btn2{
background-image:url(a2Resources/icons4/locations.png);
}
#btn3{
background-image:url(a2Resources/icons4/hotels.png);
}
#btn4{
background-image:url(a2Resources/icons4/tickets.png);
}
#btn5{
background-image:url(a2Resources/icons4/volunteer.png);
}
#container{
width:960px;
margin:0 auto;
}
#masthead{
background-image:url("LCTC.svg");
height:250px;
background-repeat: no-repeat;
align-content: center;
}
#content{
margin-left: 206px;
padding:50px;
}
h2{
font-family: 'Merriweather', serif;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
</div>
<div class="clearfix">
<nav>
<div class="butters" id="btn1"></div>
<div class="butters" id="btn2"></div>
<div class="butters" id="btn3"></div>
<div class="butters" id="btn4"></div>
<div class="butters" id="btn5"></div>
</nav>
<section id="content">
<h2>Technology & Creativity Conference</h2>
<p>
<b>Date: Sept 27-29, 2019</b>
<br>
<br>
<b>Where: Lethbridge, AB</b>
<br>
<br>
The fictitious Technology & Creative Conference is a globally recognized industry event showcasing the best the world has to offer in design, digital development, media and innovation in creative technologies – it’s three days and nights of presentations, parties, installations and performances that unite and transform the industry.
<br>
<br>
Our event explores the future of everything innovative, technical and creative to leave you informed, challenged and inspired. With hand-picked speakers from all over the world and from a variety of backgrounds; whether you’re after a highly focused experience, or your interests are more interdisciplinary, we’ve got you covered.
<br>
<br>
<b>Highlights</b>
<br>
• Over 70 presenters across three action-packed days and nights;
<br>
• Four inspiring tracks covering creativity, development, business, marketing, hardware, creative coding and more;
<br>
• Join an incredible group of talented, passionate people from around the world;
<br>
• Get hands-on with some of the latest hardware used in ways you’ve never even imagined in our exhibitor area;
<br>
• Kick-ass evening parties, performances and activities
<br>
<br>
<br>
<b>Why Should You Attend?</b>
<br>
<br>
• CREATIVES – From artists and illustrators, to filmmakers and animators, plus designers from UI to VFX, this conference will leave you full of ideas to bring back to your personal and professional work.
<br>
• TECHNOLOGISTS – Learn how to bring your most creative self into your code from some of the most exciting minds pushing technology forward. From techniques to toolkits to emerging platforms and wearables, you’ll walk away inspired by innovative solutions.
<br>
• EXECUTIVES / MARKETERS – Explore the future of innovation, technology, and creativity through presentations from cutting edge artists, studios, creatives, and technologists from around the world.
</p>
</section>
</div>
</div><!--end container-->
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Speakers</h2><p>Speaker lineup will follow in late March. In the meantime, if you work or learn in one of the following areas, there will be talks of interest for you. <br> Catergories: <ul>Animator</ul><ul>Artist</ul><ul>Creative Code</ul><ul>Designer</ul><ul>Developer</ul><ul>Educator</ul><ul>Owner/Founder</ul><ul>Typography</ul><ul>UX/UI</ul><ul>VFX</ul><ul>Illustrator</ul><ul>Creative Technologist</ul><ul>Director</ul><ul>Photographer</ul><ul>Creative Director</ul><ul>Filmmaker</ul><ul>VR</ul><ul>Story Teller</ul><ul>Researcher</ul><ul>Futurist</ul><ul>AR</ul><ul>Marketing</ul><ul>Motion Designer</ul><ul>Producer</ul></p>")
.slideDown("slow");
});
});
$("#btn2").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Location</h2><p>The Venue is the oldest theatre in the downtown core and presents cutting-edge contemporary performing arts from around the world. <br> Imagine a space where we can come together to create and learn with others, where we can actively stage and build shared meaning and culture.The Venue is this place. <br>It is the space where art, ideas and people connect in new ways, where we can simultaneously be surprised by the imagination of strangers and be turned inside out by art. <br>Where we beckon each other towards aspiration. A vibrant meeting place for experiment, innovation and spontaneous interaction. Where people forge new relationships with each other, have new conversations and engage differently with diverse perspectives and experiences. <br>It will be a vital component in people’s lives and the life of the city and beyond. The Venue reflects how arts centres need to operate in order to challenge and shift social norms and inspire people to participate, reconnect and work towards positive change. <br>Immersive, experimental and experiential, a hothouse of creativity, exchange and connection, The Junction will be a rich and dynamic arena to explore our contemporary world.</p>")
.slideDown("slow");
});
});
$("#btn3").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Hotels</h2><p><b>Official Host Hotel</b><br><br>The Downtown Hotel is the conference host hotel, and the best place for you to dive into a creative atmosphere! <br>With your stay, you’ll be minutes away from the subway, evening events, bars, restaurants. You may even bump into your favourite artist in the elevator, so start practicing your pitch! <br>The special conference rate is $215 CDN per night which includes complimentary WiFi. <br>Book your stay today by calling 1-800-ALL-FAKE. The group rate is valid until March 28. The hotel will sell out so make sure to book your room today! </p>")
.slideDown("slow");
});
//fancy content change
});
$("#btn4").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Tickets</h2>")
.slideDown("slow");
});
});
$("#btn5").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Volunteer</h2><p>Thank you for your interest in our Volunteer Team. <br> If selected, you will be scheduled for a couple of shifts at the event in exchange for a FREE ticket to the conference. Please provide the information requested, including your availability during the event. <br> Volunteers will be scheduled for approximately one full-day or two half-day shifts during the event, so when you are filling out your availability, keep in mind this does not mean you will be scheduled for every shift you are available. </p>")
.slideDown("slow");
});
});
jQuery集
身体{
字体系列：“开放式Sans”，无衬线；
}
.clearfix{
溢出：自动；
}
导航{
浮动：左；
宽度：200px；
背景色：#376b82；
}
巴特斯先生{
宽度：140px；
高度：140像素；
背景图片：url(http://placehold.it/140x140);
保证金：10px自动5px自动；
光标：指针；
}
#btn1{
背景图片：url（a2Resources/icons4/speakers.png）；
}
#btn2{
背景图片：url（a2Resources/icons4/locations.png）；
}
#btn3{
背景图片：url（a2Resources/icons4/hotels.png）；
}
#btn4{
背景图片：url（a2Resources/icons4/tickets.png）；
}
#btn5{
背景图片：url（a2Resources/icons4/志愿者.png）；
}
#容器{
宽度：960px；
保证金：0自动；
}
#桅顶{
背景图片：url（“LCTC.svg”）；
高度：250px；
背景重复：无重复；
对齐内容：居中对齐；
}
#内容{
左边距：206px；
填充：50px；
}
氢{
字体系列：“Merriweather”，衬线；
}
科技与创意会议
日期：2019年9月27日至29日
地点：莱斯布里奇，AB
虚拟技术与创意会议是全球公认的行业盛会，展示了世界在设计、数字开发、媒体和创意技术创新方面所能提供的最佳产品——通过三天三夜的展示、聚会、装置和表演，行业得以团结和变革。
我们的活动探索一切创新、技术和创意的未来，让您获得信息、挑战和灵感。来自世界各地和不同背景的精心挑选的演讲者；无论您是追求高度专注的体验，还是您的兴趣更具跨学科性，我们都会为您提供服务。
集锦
•超过70名演讲者，分三天三夜表演；
•四个鼓舞人心的轨道，涵盖创意、开发、业务、营销、硬件、创意编码等；
•加入一个来自世界各地的才华横溢、充满激情的团队；
•亲身体验一些最新的硬件，其使用方式在我们的参展商区域是你从未想象过的；
•精彩的晚会、表演和活动
你为什么要参加？
•创意人士——从艺术家和插画家到电影制作人和动画师，再加上从UI到VFX的设计师，本次会议将为您带来丰富的创意，让您回到个人和专业工作中。
•技术专家–学习如何从推动技术进步的最激动人心的头脑中，将最具创造性的自我带入代码中。从技术到工具包，再到新兴平台和可穿戴设备，您将从创新解决方案中获得灵感。
•高管/营销人员–通过尖端艺术家、工作室、crea的展示，探索创新、技术和创造力的未来
$("#btn4").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html("<h2>Tickets</h2><table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td><p>Super Early Bird</p>
<p>Ends Dec 23, 2018 </p></td>
<td><p> Early Bird</p>
<p>Ends Mar 3, 2019 </p></td>
<td><p> Regular</p>
<p>After Mar 3, 2019 </p></td>
</tr>
<tr>
<td><p>Conference</p>
<p>The most popular option.</p>
<p>(Price listed is per ticket) </p></td>
<td>$599 </td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Conference- 4 Packs</p>
<p>Buy 4 at once and SAVE.</p>
<p>(Price listed is per ticket) </p></td>
<td>$499</td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>Freelancer</p>
<p>A full 3 day conference ticket for thise who do not work full time for a single company or client </p></td>
<td> $399</td>
<td> $499</td>
<td> $599</td>
</tr>
<tr>
<td> Non-Profit/ Academic/ Military/ Government Discount <br>
<br>
A full 3 day conference ticket that is discounted for those who work at an NFP, a school, or the government or military. *Proof of employment required.</td>
<td>$499 </td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>The WORKS </p>
<p>Includes the 3 day conference (April 29-May 1, 2019) plus the workshop day (April 28) </p></td>
<td>$799 </td>
<td>$899 </td>
<td>$999 </td>
</tr>
<tr>
<td><p>FITC EXCLUSIVE - </p>
<p>New for 2019 </p>
<p>• Very limited quantity</p>
<p> • Access to Exclusive sessions</p>
<p> • Invites to Exclusive Parties</p>
<p> • Exclusive swag</p>
<p> • Skip the line pass pickup </p>
<p>• Extra drink tickets for evening events </p>
<p>• Plus more exclusive perks to be revealed! </p></td>
<td>$899 </td>
<td> $999</td>
<td> 1099</td>
</tr>
<tr>
<td><p>FLEX </p>
<p>A transferable conference ticket. (April 29-May 1, 2019) </p></td>
<td> $699</td>
<td> $799</td>
<td>$899 </td>
</tr>
<tr>
<td><p>FLEX - 4 Pack Buy </p>
<p>4 tickets and save. (Price listed is per ticket) </p></td>
<td> $599</td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Workshop Only </p>
<p>Access to one of our workshops (April 28). $199 $249 $349 </p></td>
<td> $199</td>
<td>$249 </td>
<td>$349 </td>
</tr>
<tr>
<td>One Day Only <br>
Attend one day of FITC Toronto 2019. Includes access to all three evening events. </td>
<td>n/a </td>
<td> n/a</td>
<td>$399 </td>
</tr>
</tbody>
</table>")
.slideDown("slow");
});
});
$("#btn4").click(function(){
$("#content").slideUp("slow", function(){
$("#content").html(`<h2>Tickets</h2><table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td><p>Super Early Bird</p>
<p>Ends Dec 23, 2018 </p></td>
<td><p> Early Bird</p>
<p>Ends Mar 3, 2019 </p></td>
<td><p> Regular</p>
<p>After Mar 3, 2019 </p></td>
</tr>
<tr>
<td><p>Conference</p>
<p>The most popular option.</p>
<p>(Price listed is per ticket) </p></td>
<td>$599 </td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Conference- 4 Packs</p>
<p>Buy 4 at once and SAVE.</p>
<p>(Price listed is per ticket) </p></td>
<td>$499</td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>Freelancer</p>
<p>A full 3 day conference ticket for thise who do not work full time for a single company or client </p></td>
<td> $399</td>
<td> $499</td>
<td> $599</td>
</tr>
<tr>
<td> Non-Profit/ Academic/ Military/ Government Discount <br>
<br>
A full 3 day conference ticket that is discounted for those who work at an NFP, a school, or the government or military. *Proof of employment required.</td>
<td>$499 </td>
<td>$599 </td>
<td>$699 </td>
</tr>
<tr>
<td><p>The WORKS </p>
<p>Includes the 3 day conference (April 29-May 1, 2019) plus the workshop day (April 28) </p></td>
<td>$799 </td>
<td>$899 </td>
<td>$999 </td>
</tr>
<tr>
<td><p>FITC EXCLUSIVE - </p>
<p>New for 2019 </p>
<p>• Very limited quantity</p>
<p> • Access to Exclusive sessions</p>
<p> • Invites to Exclusive Parties</p>
<p> • Exclusive swag</p>
<p> • Skip the line pass pickup </p>
<p>• Extra drink tickets for evening events </p>
<p>• Plus more exclusive perks to be revealed! </p></td>
<td>$899 </td>
<td> $999</td>
<td> 1099</td>
</tr>
<tr>
<td><p>FLEX </p>
<p>A transferable conference ticket. (April 29-May 1, 2019) </p></td>
<td> $699</td>
<td> $799</td>
<td>$899 </td>
</tr>
<tr>
<td><p>FLEX - 4 Pack Buy </p>
<p>4 tickets and save. (Price listed is per ticket) </p></td>
<td> $599</td>
<td>$699 </td>
<td>$799 </td>
</tr>
<tr>
<td><p>Workshop Only </p>
<p>Access to one of our workshops (April 28). $199 $249 $349 </p></td>
<td> $199</td>
<td>$249 </td>
<td>$349 </td>
</tr>
<tr>
<td>One Day Only <br>
Attend one day of FITC Toronto 2019. Includes access to all three evening events. </td>
<td>n/a </td>
<td> n/a</td>
<td>$399 </td>
</tr>
</tbody>
</table>`)
.slideDown("slow");
});
});
var html = `
<div>
<span>Your text here</span>
</div>
`;