用html中的行連接兩個元素

Question

我正在嘗試用html創建家譜。 這是填充物 。

在此操作中，輸入“ no”。 子項，然后單擊生成子項。 然后單擊父項，然后再次執行相同操作。 它為此產生了孩子。 如此下去。 我需要用線條將父母與孩子聯系起來。 我認為可以使用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

這是小提琴