CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Samudrala Ramu
Samudrala Ramu

Reputation: 2106

how to get whole html content and store in a variable for reusability in my Site

**In Alert my html content showing but on Click it is not working . My Requirement is User When Click On first button Then My First table want to load on table-content div,If user click on second button then my second table want to load on table content div helpme how to get whole html content in a div **

$(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>

Upvotes: 1

Views: 65

Answers (3)

BowlerDo0d
BowlerDo0d

Reputation: 72

html() also takes a parameter as content.

Try putting your variables inside like this $('.table-content').html(f);

Upvotes: 1

Arjun Arora
Arjun Arora

Reputation: 1006

You can make some minor changes in your js.

$(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);
});

Upvotes: 0

vijayP
vijayP

Reputation: 11512

You need to use setter method like $('.table-content').html(f);:

$(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>

Upvotes: 3

Related Questions