Mam stronę JSP, która ma wiele dynamicznych linków na nim w pętli foreach. Używam połączenia AJAX do backend, przekazując parametr i uzyskać odpowiednie wyniki w formacie JSON. Teraz chcę wyświetlić te wyniki tuż pod każdą sekcją odpowiadającą tym linku (a następnie, jeśli ponownie klikamy w tym samym łączu, musi ukryć tabelę). Po wielu poszukiwań, jestem w stanie wyświetlić wiersz tabeli pod każdą sekcją przy użyciu poniższego kodu, ale wyświetla te same dane w ramach każdej sekcji. Jak wyświetlić dane odpowiadające każdemu linkowi pod własną sekcją? Myślę, że jakieś indeksowanie wymagają wykonania, ale nie wiem jak.

Edytuj: Dodano 2 zrzuty ekranu, jak to było przed przed i jest po Po klikając link

<script>
$(document).ready(function () {
var tableId=this.id;
 $(".a_link").click(function(e){
 e.preventDefault();
  var href = $(this).attr('href');
  alert(href);
      $.getJSON(href, function(result){
        $.each(result, function(i, item) {
            var $tr = $('<tr/>');
            $tr.append($('<td/>').html('<a href= "{URL}/dashboard?id='+item.projectKey+'">'+item.projectKey+'</a>'));
            $('tr.keys').before($tr);

        });
    });
   });
});

</script>
<title>Projects Totals View</title>
</head>


<body>
<div class="wrapper">
 <core:forEach items="${model.totals}" var="total" varStatus="loop">
     <br/>
    <div id="container">
        <div id="left"><h4><strong>Product: <a class ="a_link" href="/expand?group=${total.projectGroup}"> <core:out value="${total.projectGroup}"/></a></strong></h4></div>        
    </div>

    <table class="table_content">
        <tr>
            <th>Total Count</th>
            <th>Total Percent</th>
            <th>Partial Percent</th>
            <th>Total TC</th>            
        </tr>
        <tr>
            <td><core:out value="${total.count}"/></td>
            <td><core:out value="${total.percent}"/></td>
            <td><core:out value="${total.partialPercent}"/></td>
            <td><core:out value="${total.dy}"/>d <core:out value="${total.hr}"/>h <core:out value="${total.mn}"/>m</td>            
        </tr>
        <tr class="keys"><td></td></tr>
    </table>

</core:forEach>
</body>
0
ljs 4 wrzesień 2017, 01:24

2 odpowiedzi

Najlepsza odpowiedź

Oto jak robiłem to działanie: Dla każdego z linków, dałem ID = "$ {Loop.index}" i na podstawie tego identyfikatora zostanie utworzona w ramach każdej sekcji w tagu

Kod fragment poniżej:

$(document).on('click', '.a_link', function(e){
  $(this).data("clicked", !$(this).data("clicked"));
  e.preventDefault();
  var clickId = $(this).attr('id');
  var host = $('#host').val();
  // the below if-else is for toggling the data (show and hide which is actually add and remove here)
  if ($(this).data("clicked")) {
      var href = $(this).attr('href');
      $.getJSON(href, function(result){
      $.each(result, function(i, item) {
              var $tr = $('<table id="innerTable"/><tr/>');
              $tr.append($('<td/>').html('<a href= "'+host+'/dashboard?id='+item.projectKey+'">'+item.projectKey+'</a>'));
              $('tr.keys-'+clickId).append($tr);
          });
      });
  }else{
      $('tr.keys-'+clickId).children('table').each(function(){
        $(this).remove();
      });
  }

});
<body>
<div class="wrapper">
 <core:forEach items="${model.totals}" var="total" varStatus="loop">
     <br/>
    <div id="container">
        <div id="left"><h4><strong>Product: <a id="${loop.index}" class ="a_link" href="/expand?group=${total.projectGroup}"> <core:out value="${total.projectGroup}"/></a></strong></h4></div>        
    </div>

    <table class="table_content">
        <tr>
            <th>Total Count</th>
            <th>Total Percent</th>
            <th>Partial Percent</th>
            <th>Total TC</th>            
        </tr>
        <tr>
            <td><core:out value="${total.count}"/></td>
            <td><core:out value="${total.percent}"/></td>
            <td><core:out value="${total.partialPercent}"/></td>
            <td><core:out value="${total.dy}"/>d <core:out value="${total.hr}"/>h <core:out value="${total.mn}"/>m</td>            
        </tr>
        <tr class="keys-${loop.index}"></tr>
    </table>

</core:forEach>
</body>
0
ljs 10 wrzesień 2017, 23:43

Próbowałem oczekiwanej wydajności. Usunąłem kod JSP za próbę tego samego. Please refrain using id (for table, div) which is inside loop. Użyłem klas dla tego samego. Proszę znaleźć fragment kodu HTML poniżej,

<div class="wrapper">
 <div class="container">
    <div class="left"><h4><strong>Product: <a class ="a_link" href="#"> product 1</a></strong></h4></div>  
</div>
 <table class="table_content">
    <tr>
        <th>Total Count</th>
        <th>Total Percent</th>
    </tr>
    <tr>
        <td>Test value1</td>
        <td>Test value2</td>
    </tr>
    <tr class="keys"><td></td></tr>
</table>
<div class="container">
    <div class="left"><h4><strong>Product: <a class ="a_link" href="#"> product 2</a></strong></h4></div>   
</div>
 <table class="table_content">
    <tr>
        <th>Total Count</th>
        <th>Total Percent</th>
    </tr>
    <tr>
        <td>Test value3</td>
        <td>Test value4</td>
    </tr>
    <tr class="keys"><td></td></tr>
</table>
</div>

I odpowiednia część jquery,

$(document).ready(function () {
    $(".a_link").click(function(e){
        e.preventDefault();
        var tableNo = $('a').index($(this));
     $('table:eq('+tableNo+') tr.keys').after('<td>'+ 'vinoth'+'</td>');
    });
});

Ponieważ nie mogę kpić z części AJAX i danych JSON, pomijam te kod i użyję niektórych danych statycznych. Możesz zastąpić kod za pomocą danych AJAX i JSON. Możesz znaleźć statyczny Roboczej Demo W przypadku odniesienia. Daj mi znać, jeśli to pomaga.

Twoje zdrowie..!

0
Vinoth Krishnan 4 wrzesień 2017, 09:45