用html连线两个元素线

Question

我想在html中创建一个家族树。 Here's the fillde。

在这我所做的是，输入no。的孩子，然后点击生成孩子。然后点击父母并再次执行相同操作。它会产生孩子。所以它继续。 我需要使用线将父级连接到子级。 我认为有多种方式，如svg，画布，但不知道如何 你可以建议我一个简单的方法来实现这一目标吗？

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