点击后用树等输入字段追加子项

Question

我正在尝试用左子和右孩子创建组织结构.就像这个演示 http://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

但我想用输入字段从这里保存数据.我想在点击后为每个孩子创建左孩子和右孩子.现在所有都在底部一个接一个显示,只删除按钮.我想添加按钮也可以为每个输入表单创建子项.我在这里使用这个

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $('#remScnt').live('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

* {
  font-family: Arial;
}
h2 {
  padding: 0 0 5px 5px;
}
h2 a {
  color: #224f99;
}
a {
  color: #999;
  text-decoration: none;
}
a:hover {
  color: #802727;
}
p {
  padding: 0 0 5px 0;
}
input {
  padding: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -web-kit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p>
    <label for="p_scnts">
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
    </label>
  </p>
</div>

这里是jsfiddle DEMO 我想创建与输入形式的插件相同的树结构.但未能做到这一点.我的片段没有问题所以我放置了jsfiddle链接.

Answer 1

您的代码中存在各种错误，主要是 id 应该是唯一的。并使用on()代替，live()因为它在新版本中已贬值。您可以使用 table 执行类似的操作，这是一个简单的演示，您需要更新它

// bind click event handler
$("#main").on('click', '.add', function() {
  //getting parent td
  var $td = $(this).parent();
  // creating child element
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">+</button>      <button class="remove">-</button>'
  });
  // getting child table if there is
  var $tbl = $td.children('table')
    // checking child exist or not , if yes then append child to it
  if ($tbl.length)
    $tbl.find('tr').eq(0).append($td1);
  // else create new table and update
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
    // bind remove handler
}).on('click', '.remove', function() {
  // remove the parent td
  $(this).parent().remove();
});

input {
  width: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" style="width:100%;text-align:center">
  <tr>
    <td>
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
      <button class="add">
        +
      </button>
      <button class="remove">
        -
      </button>
    </td>
  </tr>
</table>