Question

我有一个XML数据表。我目前正在使用ajax从中提取数据以创建特定的选项卡并构建数据表。我坚持的是，当选择一行数据时，详细信息将显示在相邻的div集合中，就像这样：

What I want

由于匿名而省略数据。当前，此过程使用Spry，我想使用jQuery重新创建它。

下面是我的jQuery

$jq.ajax({
  method: "GET",
  url: url,
  dataType: "xml",
  success: build,
  error: error
});

//function to create the tabs
function build(xmlData) {
  var locations = []; //create blank array to store locations
    //loop to go over every event and find locations
    $jq(xmlData).find("event").each(function (){
      var $jqLocation = $jq(this).find("location").text();
      //if location does not already exist, add to array
      if (jQuery.inArray($jqLocation, locations) == -1 ) {
        locations.push($jqLocation);
      } 
      //case statement to determine number of events
      switch ($jqLocation) {
        case 'Denver':
          denverNum += 1;
          break;
        case 'Elko, NV':
          elkoNum += 1;
          break;
        case 'Saskatoon, SK':
          saskNum += 1;
          break; 
        case 'Montreal':
          montrealNum += 1;
          break;
        case 'Vancouver, BC':
          vancouverNum += 1;
          break;
        case 'Toronto, ON':
          torontoNum += 1;
          break;
        case 'Remote Training':
          remoteNum += 1;
          break;
        case 'Gillette, WY':
          gilletteNum += 1;
          break;
      }
    })

  //iterates through the array to create the tabs if the location is present
  locations.forEach(function(place){
    switch (place) {
      case 'Denver':
        $jq('<li role="presentation" id="remoteTab"><a href="#denver" aria-controls="messages" role="tab" data-toggle="tab">Denver, CO</a></li>').appendTo('#tabList');
        break;
      case 'Elko, NV':
        $jq('<li role="presentation" id="remoteTab"><a href="#elko" aria-controls="messages" role="tab" data-toggle="tab">Elko, NV</a></li>').appendTo('#tabList');
        //iterates through XML data to find Elko events and builds the table
        $jq("event", xmlData).each(function(){
          var eventLocation = $jq(this).find('location').text();
          if (eventLocation.localeCompare('Elko, NV') == 0) {
            var date = $jq(this).find("date").text();
            var course = $jq(this).find("course").text();
            var duration = $jq(this).find("duration").text();
            var presenter = $jq(this).find("presenter").text();
            var details = $jq(this).find("details").text();
            var output = '<tr>';
            output += '<td>'+date+'</td>';
            output += '<td>'+course+'</td>';
            output += '<td>'+duration+' days</td>';
            output += '</tr>';
            $jq('#elkoTable').append(output);
            output = '<strong>';
            output += presenter;
            output += '</strong>';
            $jq('#elkoPresenter').append(output);
            output = '<strong>'+date+'</strong>';
            $jq('#elkoDate').append(output);
          };
        });
        //jquery for making rows active upon click
        $jq('#elkoTable tr').click(function() {
          $jq('tr').removeClass();
           $jq(this).addClass('active');

这是它所附的HTML

<table class="table table-striped table-hover" width="100%" cellpadding="2" cellspacing="0" id="elkoTable">
                <tr>
                  <th width="150" spry:sort="date">Date (yr-mth-day)</th>
                  <th align="left" spry:sort="course">Course</th>
                  <th width="100" spry:sort="duration">Duration</th>
                </tr>
              </table>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading" tabindex="0">Details</div>
          <div class="panel-body">
            <!-- <div id="Specials_Detail_DIV2" spry:detailregion="Vulcan_elko"> -->
            <div id="Specials_Detail_DIV2">
              <div class="row">
                <div class="col-xs-9">
                  <p>
                    <span class="small">Course:</span>
                    <br>
                    <!-- <strong>{course}</strong> -->
                  </p>
                </div>

Answer 1

对于那些仍在努力解决此问题的人，我发现了一种古怪的解决方法。我创建了一个变量，并基本上在该变量中创建了所有div，并将其附加到html。点击表格行后，它将获取行ID，并找到与ID +'Details'相匹配的正确div。

var detailsPane = '<div class="panel panel-default" id="'+id+'Details" style="display: none;"><div class="panel-heading" tabindex="0">Details</div><div class="panel-body"><div class="row"><div class="col-xs-9"><p><span class="small">Course:</span><br><strong>'+course+'</strong></p></div><div class="col-xs-3"><a href="https://maptek.secure.force.com/training/TrainingWorkshopRegister?WSId=' + id +'" target="_blank" class="btn btn-default btn-block">Register Now</a></div></div>';
            detailsPane += '<div class="row"><div class="col-xs-3"><p><span class="small">Date:</span><br><strong>'+date+'</strong> </p> </div><div class="col-xs-3"><p><span class="small">Duration:</span><br><strong>'+duration+' Days</strong></p></div><div class="col-xs-6"><p><span class="small">Presenter:</span><br><strong>'+presenter+'</strong></p></div></div>';
            detailsPane += '<hr>';
            detailsPane += '<div class="row"><div class="col-xs-12"><div><div style="text-align:right"><strong>'+isFull+'</strong> </div></div>'+details;
            detailsPane += '<hr>';
            detailsPane += '<div class="row"><div class="col-sm-6 col-xs-12"><h4>Provided with each course</h4><ul><li>Laptop Software/license</li><li>Training manual</li><li>Writing materials</li><li>Lunch</li><li>Coffee break refreshments</li></ul></div><div class="col-sm-6 col-xs-12"><h4>Facility Rentals </h4><p>Training facilities and laptops can be reserved .</p><p>For more information contact <a href=">email</a> or call <a href="tel">+1 9</a></p></div></div></div></div></div></div></div>';
            $jq('#details').append(detailsPane);

如果此后跟代码使其显示

var id = $jq(this).attr('id');
$jq('#'+id+'Details').show();

表格行处于活动状态时显示XML数据

1 个答案: