2017-12-11 3 views
0

こんにちはイムトライン:Jqueryを使用してテーブルをスライドダウンする方法は?このように見えるテーブルのHTMLからテーブルの行をslideDownする

<table> 
<tr class="toggle-tr" style="display:none;"> 
<td colspan="8">' + 
         '<h3>Class Code <span>' + (typeof data.result.ClassCode!='undefined' ? data.result.ClassCode : "") + '</span><a class="closeExpand pull-right" onclick="closeExpand(this)" href="javascript:void(0)">Close [x]</a></h3>' + 
         '<div class="table-responsive"><table class="table"><tr>' + 
         '<th class="sub_class_code">Sub Code</th>' + 
         '<th class="sub_class_code_th2">Class Description</th>' + 
         '</tr>' + (typeof data.result.SubCode!='undefined' ? data.result.SubCode : "") + 
         '</table></div>' + 
         '<div class="hazards">' + 
         '<p>Hazard Code <span>' + (typeof data.result.HazardCode!='undefined' ? data.result.HazardCode : "") + '</span></p>' + 
         '<p>Industry Group <span>' + (typeof data.result.IndustryGroup!='undefined' ? data.result.IndustryGroup : "") + '</span></p>' + 
         '<p>Industry Description <span>' + (typeof data.result.IndustryDescription!='undefined' ? data.result.IndustryDescription : "") + '</span></p>' + 
         '<p>Rate <span>' + (typeof data.result.Rate!='undefined' ? data.result.Rate : "") + '</span></p>' + 
         '<p>Effective Date <span>' + (typeof data.result.effDate!='undefined'? data.result.effDate : "")+ '</span></p>' + 
         '</div>' + 
         '</td>' + 
         '</tr> 
</table> 

テーブルはslideUpに閉じるボタンがあり、このjQueryのコードで正常に動作している:

function closeExpand(obj) { 

    var row = $(obj).closest('tr').children('td'); 

     $(row).animate({ paddingTop: 0, paddingBottom: 0 }, 800) 
     .wrapInner('<div />') 
     .children() 
     .slideUp(800, function() { 
      $(this).closest('tr').remove(); 
     }); 


    previous_element = ''; 

} 

しかし、どのようにslideDownテーブルが隠されているかわからない...助けてください!おかげ

答えて

0

は、私が実際には、テーブル内のdivを配置して、本部は、今の表では、このように見えることを滑り落ちることで働かせた:

success: function (data) { 
       var html =<tr class="toggle-tr" ><td colspan="8">' + 
         '<div class="content toggle-tr" style="display:none;"><h3>Class Code <span>' + (typeof data.result.ClassCode!='undefined' ? data.result.ClassCode : "") + '</span><a class="closeExpand pull-right" onclick="closeExpand(this)" href="javascript:void(0)">Close [x]</a></h3>' + 
         '<div class="table-responsive"><table class="table"><tr>' + 
         '<th class="sub_class_code">Sub Code</th>' + 
         '<th class="sub_class_code_th2">Class Description</th>' + 
         '</tr>' + (typeof data.result.SubCode!='undefined' ? data.result.SubCode : "") + 
         '</table></div>' + 
         '<div class="hazards">' + 
         '<p>Hazard Code <span>' + (typeof data.result.HazardCode!='undefined' ? data.result.HazardCode : "") + '</span></p>' + 
         '<p>Industry Group <span>' + (typeof data.result.IndustryGroup!='undefined' ? data.result.IndustryGroup : "") + '</span></p>' + 
         '<p>Industry Description <span>' + (typeof data.result.IndustryDescription!='undefined' ? data.result.IndustryDescription : "") + '</span></p>' + 
         '<p>Rate <span>' + (typeof data.result.Rate!='undefined' ? data.result.Rate : "") + '</span></p>' + 
         '<p>Effective Date <span>' + (typeof data.result.effDate!='undefined'? data.result.effDate : "")+ '</span></p>' + 
         '</div>' + 
         '</div>' + 
         '</td>' + 
         '</tr> 
if (hiddenContent.is(":hidden")){ 
       // Hide it slowly. 
       hiddenContent.slideDown(900); 
      } 

      } 
関連する問題