在 html 中用线连接两个元素

Question

我正在尝试在 html 中创建家谱。 Here's the fillde.

在此我所做的是，输入编号。 children 并单击生成 child。然后单击 parent 并再次执行相同操作。它为此生成 childs。所以它继续。我需要用线将 parent 连接到 child。我认为有多种方法，例如 svg, canvas 但不确定如何你能建议我一个简单的方法来实现这个吗？

HTML

<table>
  <tr>
    <td id="title"></td>
  </tr>
  <tr>
    <td>Enter Name1:</td>
    <td>
      <input id="txtName1" type="text">
    </td>
    <td></td>
    <td colspan="2">
      <input type="button" id="btnUpdate1" value="Update 1" />
    </td>
  </tr>
  <tr>
    <td>Enter Name2:</td>
    <td>
      <input id="txtName2" type="text">
    </td>
    <td></td>
    <td colspan="2">
      <input type="button" id="btnUpdate2" value="Update 2" />
    </td>
  </tr>
  <tr>
    <td>Enter No of Children:</td>
    <td>
      <input id="txtChilds" type="number">
    </td>
    <td colspan="2">
      <input type="button" id="btnGenerate" value="Generate" />
    </td>
  </tr>
</table>
<div id="divFamilyTree">
</div>

JavaScript

$(document).ready(function() {
  $('#divFamilyTree').on('click', 'table', function(e) {
    if (!$(this).hasClass("member")) {
      e.stopImmediatePropagation();
      $('#divFamilyTree').find('table').removeClass('selected');
      $(this).addClass('selected');
    }
  });

  $('#btnUpdate1').click(function() {
    var ft = $('#divFamilyTree');
    var selected = ft.find('table.selected');
    selected.find('.name1:first').html($('#txtName1').val());
  });

  $('#btnGenerate').click(function() {
    var ft = $('#divFamilyTree');
    var selected = ft.find('table.selected');
    var childs = $('#txtChilds').val();
    if (childs > 0) {
      if (ft.find('table').length > 0) {
        if (selected.length != 0) {
          selected.find('.child').remove();
          selected.append('<tr class="child"><td></td></tr>');
          var td = selected.find('tr.child>td')
          for (i = 0; i < childs; i++)
            td.append('<table><tr><td><table class="member"><tr><td class="name1">Person 1</td><td class="name2">Person 2</td></tr></table></td></tr></td></table>');
        }
      } else {
        for (i = 0; i < childs; i++)
          ft.append('<table><tr><td><table class="member"><tr><td class="name1">Person 1</td><td class="name2">Person 2</td></tr></table></td></tr></td></table>');
      }
    }
  })
});

CSS

 .selected {
   background-color: lightgrey;
 }

 #divFamilyTree {
   text-align: center;
 }

 table {
   display: inline-block;
   vertical-align: top;
 }

 #divFamilyTree,
 td,
 tr {
   white-space: nowrap;
 }

Answer 1

我已经用 HTML5 Canvas 弄明白了。感谢@Sean_A91

Here's the fiddle

在 html 中用线连接两个元素

connect two elements with line in html

html

javascript

treeview

jquery

svg