将表放入jQuery

时间：2019-02-24 02:21:20

标签： jquery

我对jquery还是陌生的，坦率地说，我的编码能力很差。 我正在制作一个用于学校作业的网站，我需要在“票”标签的＃btn4中放置一张桌子。

按照我的建议，我已经在另一个文档上创建了表格。但是，当我尝试将其放入代码中时，它将无法正常工作。

我把它放在错误的地方，或者表制作不正确。

这是表格的代码：

<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</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/&nbsp;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>

这是我的网站代码。我不确定问题出在哪里，所以我将全部包括在内。

<!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");
                        });
                            });

当我在代码中输入表格时，这就是我的做法：

$("#btn4").click(function(){
                        $("#content").slideUp("slow", function(){
                            $("#content").html("<h2>Tickets</h2><table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</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/&nbsp;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");
                        });
                            });

3 个答案:

答案 0 :(得分：2)

注意：：请参阅下面的@BitwiseCreative更彻底的解决方案，这实际上是由于多种原因（浏览器支持，代码组织，调试，SEO，pony unicorns等）应如何处理。

在JavaScript中，您不能有这样的多行字符串，因此您要么需要将所有HTML字符串移动到一行，要么通过将字符串括在反引号{{中来使用template string插值1}}而不是引号`` ... 

””

答案 1 :(得分：1)

我建议不要将HTML放在JS之外。您可以默认隐藏它，并使用jQuery控制它。这是一个示例：

$(function() {

  var curId = false;
  // Click Nav
  $('#nav li').on('click', function() {
    var id = $(this).data('show');
    if (curId === false) {
      $(id).slideDown('slow')
      curId = id;
    } else {
      if (id !== curId) {
        $(curId).slideUp('slow', function() {
          $(id).slideDown('slow');
        });
        curId = id;
      }
    }
  });
});
#nav li {
  color: #f09;
  text-decoration: underline;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li data-show="#table">Show Table</li>
    <li data-show="#list">Show List</li>
    <li data-show="#other-thing">Show Other Thing</li>
  </ul>
</div>

<div id="content">
  <div id="table" style="display: none;">
    <table>
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>stuff in first col</td>
          <td>stuff in second col</td>
          <td>stuff in third col</td>
        </tr>
        <tr>
          <td>stuff in first col</td>
          <td>stuff in second col</td>
          <td>stuff in third col</td>
        </tr>
        <tr>
          <td>stuff in first col</td>
          <td>stuff in second col</td>
          <td>stuff in third col</td>
        </tr>
        <tr>
          <td>stuff in first col</td>
          <td>stuff in second col</td>
          <td>stuff in third col</td>
        </tr>
        <tr>
          <td>stuff in first col</td>
          <td>stuff in second col</td>
          <td>stuff in third col</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="list" style="display: none;">
    <ol>
      <li>Thing 1</li>
      <li>Thing 2</li>
      <li>Thing 3</li>
    </ol>
  </div>

  <div id="other-thing" style="display: none;">
    <pre>
                              /
                   __       //
                   -\= \=\ //
                 --=_\=---//=--
               -_==/  \/ //\/--
                ==/   /O   O\==--
   _ _ _ _     /_/    \  ]  /--
  /\ ( (- \    /       ] ] ]==-
 (\ _\_\_\-\__/     \  (,_,)--
(\_/                 \     \-
\/      /       (   ( \  ] /)
/      (         \   \_ \./ )
(       \         \      )  \
(       /\_ _ _ _ /---/ /\_  \
 \     / \     / ____/ /   \  \
  (   /   )   / /  /__ )   (  )
  (  )   / __/ '---`       / /
  \  /   \ \             _/ /
  ] ]     )_\_         /__\/
  /_\     ]___\
 (___)
</pre>
  </div>
</div>

答案 2 :(得分：0)

您应该做的几件事。

all of my code stops working。应该有一个错误。您可以至少检查控制台日志。您可以为此使用内置的浏览器检查器控制台（尝试F12或right-click and select inspect）。您可以从中得到一个想法。

由于这是您首次尝试插入该表，因此请尝试将其插入较小的部分。就像一次只生一个一样。由此，您也可以轻松进行调试。

JavaScript实际上在ECMAScript 2015中支持多行字符串。 ECMAScript 2015（ES6）引入了一种新型的文字，即template literals。它们具有许多功能，其中包括变量插值，但对于这个问题最重要的是，它们可以是多行的。 您可以使用此功能，因为您在实际的表格元素字符串中带有引号。

模板文字由反引号分隔：

var html = `
   <div>
       <span>Your text here</span>
   </div>
`;

不使用.html()来设置新元素，也可以使用.append()。

相关问题
最新问题