获取克隆的行和列以在内部div

Question

我几乎得到了一个冷冻标题并且左列工作。任何人都可以告诉我如何让包含标题行和左列的克隆表出现在包含主表的div中 - 以及如何在适当的时候使用克隆标题和克隆列进行滚动。

有人已经为我发布了以下代码...但是当您点击“运行代码段”时，它在此处无法正常显示或运行。这个fiddle显示了我遇到的显示问题。

＆＃13;

＆＃13;

var $target = $("#targetT");

$("#sourceT tr").each(function() {
  var $clone = $(this).clone();
  $clone.children(':gt(0)').remove();
  $clone.height($(this).height());
  $target.append($clone);
});

var $targethead = $("#targetThead");
$("#sourceT tr:first").clone().appendTo($targethead);
$("#sourceT").find('tr').first().children().each(function(i, e) {
  $($("#targetThead").find('tr').children()[i]).width($(e).width());
});

＆＃13;

.gv {
  border-collapse: collapse;
  border-spacing: 0;
  z-index: 100;
  background-color: White;
}
.gv td {
  white-space: nowrap;
  border: 1px solid #CCCCCC;
  padding: 0.2em;
}
.gvOver {
  background-color: White;
  border-collapse: collapse;
  border-spacing: 0;
  z-index: 150;
  position: fixed;
  top: 21px;
}
.gvOver td {
  white-space: nowrap;
  border: 1px solid #CCCCCC;
  padding: 0.2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow:auto; position:absolute; top:20px; left:20px; right:500px; bottom:540px; border:1px solid red; z-index:200;">
  <table id="sourceT" class="gv">
    <tr>
      <td>Name</td>
      <td>Heading</td>
      <td>Heading</td>
      <td>Heading</td>
      <td>Heading</td>
    </tr>
    <tr>
      <td>Fred</td>
      <td style="font-weight:bold; font-size:120%;">Some random text</td>
      <td style="font-weight:bold; font-size:120%;">Some random text</td>
      <td style="font-weight:bold; font-size:120%;">Some random text</td>
      <td style="font-weight:bold; font-size:120%;">Some random text</td>
    </tr>
    <tr>
      <td style="background-color:Yellow;">Martha</td>
      <td>Some random text</td>
      <td>Some random text
        <br>Bigger row</td>
      <td>Some random text</td>
      <td>Some random text</td>
    </tr>
    <tr>
      <td style="background-color:Lime;">William</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
    </tr>
    <tr>
      <td>Samantha</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
    </tr>
    <tr>
      <td>Brian</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
      <td>Some random text</td>
    </tr>
  </table>
  <table id="targetT" class="gvOver"></table>
  <table id="targetThead" class="gvOver"></table>
</div>

＆＃13;

＆＃13;

＆＃13;