Question

我试图用html创建一个家谱。 Here's the fillde

在我正在做的事情中，输入号码。儿童和点击生成孩子。然后单击父级并再次执行相同操作。它会为此生成孩子。所以它继续下去。我需要通过行将父级连接到子级。我认为有多种方式，如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中的行连接两个元素

1 个答案: