私のサイトの再利用のために、HTMLコンテンツ全体を取得し、変数を再利用する方法

Question

**私のHTMLコンテンツは表示されていますが、クリックすると動作しません。最初のボタンをクリックしたときにMy RequirementがユーザーになってからMy Firstテーブルがテーブルコンテンツdivにロードされます。ユーザーが2番目のボタンをクリックすると、2番目のテーブルがテーブルコンテンツにロードしますdiv helpme divの全HTMLコンテンツを取得する方法* *あなたが$('.table-content').html(f);のようなsetterメソッドを使用する必要が

$(document).ready(function(){ 
 
    $('#first').hide(); 
 
    $('#second').hide(); 
 
    var f = $('#first').html(); 
 
    var r = $('#second').html(); 
 
    alert(f); 
 
    alert(r); 
 
    $('#fst').click(function(){ 
 
    $('.table-content').html()= f; 
 
    }); 
 
    $('#snd').click(function(){ 
 
    $('.table-content').html()= r; 
 
    }); 
 
});

*{ 
 
margin:0px; 
 
    padding:0px; 
 
} 
 
.f1{ 
 
width:100%; 
 

 
} 
 
table,th,td{ 
 
    border:1px solid #ff9900; 
 
    border-collapse:collapse; 
 
} 
 
.f1 td{ 
 
text-align:center; 
 
} 
 
.f2{ 
 
width:100%; 
 

 
} 
 
.f2 td{ 
 
text-align:center; 
 
} 
 
.container{ 
 
    position:relative; 
 
    display:inline-block; 
 
    width:100%; 
 
    height:100%; 
 
    background:#ccc; 
 
    padding:5px; 
 
} 
 
.table-content{ 
 
    width:100%; 
 
    height:100px; 
 
    border:1px solid #ff8800; 
 
    } 
 
.btns{ 
 
text-align:center; 
 
    padding-top:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first"> 
 
<table class="f1"> 
 
    <tr height="50"> 
 
    <th width="33%">column11</th> 
 
    <th width="34%">column12</th> 
 
    <th width="33%">column13</th> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    </table> 
 
    </div> 
 
<div id="second"> 
 
<table class="f2"> 
 
    <tr height="50"> 
 
    <th width="33%">column21</th> 
 
    <th width="34%">column22</th> 
 
    <th width="33%">column23</th> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    </table> 
 
    </div> 
 
<div class="container"> 
 
<div class="table-content"></div> 
 
    <div class="btns"> 
 
    <button id="fst">Frist</button> 
 
    <button id="snd">Second</button> 
 
    </div> 
 
    
 
</div>

Answer 1

：

$(document).ready(function() { 
 
    $('#first').hide(); 
 
    $('#second').hide(); 
 
    var f = $('#first').html(); 
 
    var r = $('#second').html(); 
 

 
    $('#fst').click(function() { 
 
    $('.table-content').html(f); 
 
    }); 
 
    $('#snd').click(function() { 
 
    $('.table-content').html(r); 
 
    }); 
 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.f1 { 
 
    width: 100%; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid #ff9900; 
 
    border-collapse: collapse; 
 
} 
 
.f1 td { 
 
    text-align: center; 
 
} 
 
.f2 { 
 
    width: 100%; 
 
} 
 
.f2 td { 
 
    text-align: center; 
 
} 
 
.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #ccc; 
 

 
} 
 
.table-content { 
 
    width: 99%; 
 
    height: 100px; 
 
    border: 1px solid #ff8800; 
 
} 
 
.btns { 
 
    text-align: center; 
 
    padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first"> 
 
    <table class="f1"> 
 
    <tr height="50"> 
 
     <th width="33%">column11</th> 
 
     <th width="34%">column12</th> 
 
     <th width="33%">column13</th> 
 
    </tr> 
 
    <tr height="50"> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div id="second"> 
 
    <table class="f2"> 
 
    <tr height="50"> 
 
     <th width="33%">column21</th> 
 
     <th width="34%">column22</th> 
 
     <th width="33%">column23</th> 
 
    </tr> 
 
    <tr height="50"> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="container"> 
 
    <div class="table-content"></div> 
 
    <div class="btns"> 
 
    <button id="fst">Frist</button> 
 
    <button id="snd">Second</button> 
 
    </div> 
 

 
</div>

Answer 2

html()もコンテンツとしてパラメータをとります。

は、あなたがあなたのjsの中にいくつかのマイナーな変更を加えることができ、このような$('.table-content').html(f);

Answer 3

の内側にあなたの変数を入れてみてください。

$(document).ready(function(){ 
    $('#first,#second').hide(); 
    var html=""; 
    $('#fst').click(function(){ 
    html=$.trim($(this).html()); 
    }); 
    $('#snd').click(function(){ 
    html=$.trim($(this).html()); 
    }); 
    $('.table-content').html(html); 
});