在行中单击

Question

我尝试在行单击的新窗口中打开div。我试过这个.. div在新窗口中打开，但问题是这只显示1 div而我有2个div而第二个问题是当它打开然后没有演示栏和菜单显示我想要显示这些在新窗口中打开div时使用div

这是我试过的

link js fiddle

＆＃13;

＆＃13;

$(function() {
  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'sumdata',
      type: 'pie',
      width: 500,
      borderWidth: 2,
      events: {
        load: function(event) {
          var total = 0;
          for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
            total += this.series[0].yData[i];
          }
          var text = this.renderer.text(
            'Total: ' + total,
            this.plotLeft,
            this.plotTop - 20
          ).attr({
            zIndex: 5
          }).add()
        }
      }
    },

    title: {
      text: 'demo'
    },

    credits: {
      enabled: false
    },

    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      y: 30,
      labelFormat: '{name} ({y})',
      navigation: {
        activeColor: '#3E576F',
        animation: true,
        arrowSize: 12,
        inactiveColor: '#CCC',
        style: {
          fontWeight: 'bold',
          color: '#333',
          fontSize: '12px'
        }
      }
    },
    tooltip: {
      formatter: function() {
        return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
      }
    },
    series: [{
      data: (function() {
        var names = 'grapes,lemon,orange,sugar,tea,pine',
          arr = [];

        Highcharts.each(names.split(','), function(name) {
          arr.push({
            name: name,
            y: Math.round(Math.random() * 100)
          });
        });

        return arr;
      }()),
      showInLegend: true
    }]

  });
});



$(function() {
  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'pie',
      width: 500,
      borderWidth: 2,
      events: {
        load: function(event) {
          var total = 0;
          for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
            total += this.series[0].yData[i];
          }
          var text = this.renderer.text(
            'Total: ' + total,
            this.plotLeft,
            this.plotTop - 20
          ).attr({
            zIndex: 5
          }).add()
        }
      }
    },

    title: {
      text: 'demo'
    },

    credits: {
      enabled: false
    },

    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      y: 30,
      labelFormat: '{name} ({y})',
      navigation: {
        activeColor: '#3E576F',
        animation: true,
        arrowSize: 12,
        inactiveColor: '#CCC',
        style: {
          fontWeight: 'bold',
          color: '#333',
          fontSize: '12px'
        }
      }
    },
    tooltip: {
      formatter: function() {
        return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
      }
    },
    series: [{
      data: (function() {
        var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
          'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
          arr = [];

        Highcharts.each(names.split(','), function(name) {
          arr.push({
            name: name,
            y: Math.round(Math.random() * 100)
          });
        });

        return arr;
      }()),
      showInLegend: true
    }]

  });
});

function nWin() {
  var w = window.open();

  var html1 = $("#container").html();
  var html2 = $("#sumdata").html();

  $(w.document.body).html(html1, html2);
  //$(w.document.body).html(htmll);
}
$(function() {
  $('#tabledata').on('click', 'tr', (nWin))
    //  $("a#print").click(nWin);
});

＆＃13;

.lefttabs {
  background-color: #1E1E1E;
  color: White;
  position: absolute;
  font-weight: bold;
  font-size: medium;
  margin-top: 12px;
  width: 150px;
  height: 400px;
  z-index: 10;
  /
}
.lefttabs li {
  list-style: none;
  margin-left: -30px;
}
#tabledata {
  margin-left: 160px;
}
#cont {
  margin-left: 160px;
  background-color: blue;
}
#sumdata {
  margin-left: 160px;
}
.bar {
  background-color: blue;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div class="bar">
  demo
</div>
<div class="lefttabs">
  <ul>
    <li>
      <a>DASHBOARD</a> 
    </li>
    <li>
      <a>EVENTS</a>
    </li>
  </ul>
</div>


<table id="tabledata">

  <thead>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
      <td>
        3
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1data
      </td>
      <td>
        2data
      </td>
      <td>
        3data
      </td>
    </tr>
    <tr>
      <td>
        data1
      </td>
      <td>
        data2
      </td>
      <td>
        data3
      </td>
    </tr>
  </tbody>
</table>


<div id="container" style="width: 50px; height: 200px;margin-left: 170px;display:none"></div>
<br />
<div id="sumdata" style="width: 50px; height: 200px;margin-left: 170px;display:none"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用append方法代替html方法。 我已经更新了小提琴。 http://jsfiddle.net/8dXvt/1481/