Question

我正在创建一个jQuery插件，当用户在网页上选择一个表格时会向用户显示一个条形图。我能够在同一页面上呈现表格。有什么办法可以把这个表放在一个对话框中吗？我从未使用过对话框，所以我尝试使用以下方法在新窗口中放置div：

var popup = window.open('about:blank','instructions','width=300,height=200');
popup.onload = function() {
    jQuery(popup.document.body).append(".chart");
}

我的div是<div class="chart"></div>

但它只是打开一个空白窗口。

这是我工作的jsfiddle，它将图表呈现在同一页面上：

＆＃13;

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}
$( "table" ).on('click', function() {
    var selection = getSelected();

    if (selection) {
        var data = [];
        var vals = $('#test').find('td').filter(function () {
            //get only <td> that contain numeric value inside it
            return $.isNumeric(this.innerHTML);
        }).each(function (i, val) {
            data.push(val.innerHTML);
        });
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
     //alert(data);
    }
});

＆＃13;

    .chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

＆＃13;

<div class="chart"></div>
  <table id="test" style="width:100%">
    <tbody><tr>
        <td>Jill</td>
        <td>21</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>13</td>
        <td>94</td>
    </tr>
</tbody></table>

＆＃13;

感谢任何帮助。谢谢。

Answer 1

就javascript对话框而言，您的选项仅限于您可以执行的操作。例如，换行符<br/>不能与对话框一起使用。您必须使用换行符\n。如果你需要在“盒子”中呈现某种HTML，我建议使用不同的东西，如花式盒子。这是查看一些示例的链接。它支持各种各样的东西，如图像，视频和静态HTML。

http://fancyapps.com/fancybox/#examples

将div放在对话框中

1 个答案: