Javascript 如何以树格式显示用户添加的文本
我已经在我的输入图像描述中添加了输入/文本区域标记，用户可以在html中添加多个关键字。。 1） 我不知道如何添加关闭按钮的用户文本，并显示在文本区（下面是屏幕截图）。 2） 我还想为提交的表单添加带有按钮的数据的树视图，用户可以根据需要编辑数据（参见树截图）Javascript 如何以树格式显示用户添加的文本,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我已经在我的输入图像描述中添加了输入/文本区域标记，用户可以在html中添加多个关键字。。 1） 我不知道如何添加关闭按钮的用户文本，并显示在文本区（下面是屏幕截图）。 2） 我还想为提交的表单添加带有按钮的数据的树视图，用户可以根据需要编辑数据（参见树截图） 代码： html: 关键词 +添加关键字 关键词 拯救 其他 +添加关键字 CSS: .面板-标题。倒塌。fa V形向上， .面板标题。fa V形向下{ 显示：无； } .面板标题。倒塌。fa V形向下， .面板标题。fa V形向
代码：
html:
关键词
- +添加关键字
-
关键词
拯救
其他
+添加关键字
CSS:
.面板-标题。倒塌。fa V形向上，
.面板标题。fa V形向下{
显示：无；
}
.面板标题。倒塌。fa V形向下，
.面板标题。fa V形向上{
显示：内联块；
}
i、 fa{
光标：指针；
右边距：5px；
}
.折叠~.面板主体{
填充：0；
}
ul，li{列表样式：无；边距：0；填充：0；}
ul{左填充：1em；}
左{1米；
边框：1px点黑色；
边框宽度：0 1px 1px；
}
li.container{边框底部：0px；}
li.empty{字体样式：斜体；
颜色：银色；
边框颜色：银色；
}
li p{边距：0；
背景：白色；
位置：相对位置；
顶部：0.5em；
}
li ul{
边框顶部：1个点黑色；
左边距：-1米；
左：2米；
}
最后一个孩子{
左边框：1px纯白；
左边距：-17px；
}
#myDIV{
宽度：100%；
填充：50px0；
文本对齐：左对齐；
背景色：白色；
边缘顶部：20px；
}
请告诉我如何实现以上两件事，提前感谢您的建议。index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css"></style>
<body>
<div ng-app="treeApp" ng-controller="treeController">
<div class="container">
<div class="row">
<div class="col-12">
<div id="accordion">
<div class="card">
<div class="card-header bg-info" id="headingOne">
<h5 class="mb-0">
<button class="btn text-light" data-toggle="collapse" data-target="#Keywords" aria-expanded="true" aria-controls="collapseOne">
Keywords
</button>
</h5>
</div>
<div id="Keywords" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>
<div class="t input-group">
<input list="companiesList" class="form-control form-per" placeholder="Company Name" aria-describedby="inputGroupPrepend" ng-model="selectedCompany">
<div class="input-group-prepend">
<span class="input-group-text fa fa-close" id="inputGroupPrepend"> </span>
</div>
<datalist id="companiesList">
<option ng-repeat="c in companies" >{{ c }}</option>
</datalist>
</div>
</li>
<li>
<div class="t input-group">
<input type="text" class="form-control" placeholder="Keyword" ng-model="newKeyword">
<button ng-click="addKeyword(selectedCompany)" class="btn btn-primary" ng-disabled="!newKeyword || !selectedCompany">
<span class="fa fa-plus"></span> Add Keyword</button>
</div>
</li>
<li>
<div class="t keywordsList">
<span class="keyword-box" ng-repeat="k in keywordTree[selectedCompany]">
{{ k }} <i class="fa fa-close" ng-click="removeTag(k, selectedCompany)"></i>
</span>
</div>
</li>
<ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-info" id="headingTwo">
<h5 class="mb-0">
<button class="btn text-light" data-toggle="collapse" data-target="#Others" aria-expanded="false" aria-controls="collapseTwo">
Others
</button>
</h5>
</div>
<div id="Others" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('treeApp', []);
app.controller('treeController', function($scope) {
$scope.companies = [
'Apple',
'Microsoft',
'Google',
'IBM',
];
$scope.keywordTree = {};
$scope.companies.forEach(function(c){
$scope.keywordTree[c] = [];
})
$scope.addKeyword = function(sc){
if($scope.keywordTree[sc].includes($scope.newKeyword)){
alert("This keyword already exists")
}else{
$scope.keywordTree[sc].push($scope.newKeyword);
}
$scope.newKeyword = '';
}
$scope.removeTag = function(t , sc){
alert('are you sre you want to remove ' + t + 'from list
')
var idx = $scope.keywordTree[sc].indexOf(t);
$scope.keywordTree[sc].splice(t, 1);
}
});
</script>
</body>
</html>
让我知道这就是你要找的吗？嗨，你能添加你已经尝试过的吗？请使用下面的链接到c代码，你可以使用一个代码片段将其直接添加到你的问题中。（Ctrl+M）@Nicolas，添加了linkNo，使用代码片段将代码从JSFIDLE直接复制到您的问题中。您阅读了该部分吗？感谢您的重播。它不完全匹配，但了解如何根据我对树视图的要求进行自定义。我不确定如何将“关闭”按钮添加到用户文本并在文本区域中显示它（以上是屏幕截图）请检查从列表中删除项目的更新代码
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css"></style>
<body>
<div ng-app="treeApp" ng-controller="treeController">
<div class="container">
<div class="row">
<div class="col-12">
<div id="accordion">
<div class="card">
<div class="card-header bg-info" id="headingOne">
<h5 class="mb-0">
<button class="btn text-light" data-toggle="collapse" data-target="#Keywords" aria-expanded="true" aria-controls="collapseOne">
Keywords
</button>
</h5>
</div>
<div id="Keywords" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>
<div class="t input-group">
<input list="companiesList" class="form-control form-per" placeholder="Company Name" aria-describedby="inputGroupPrepend" ng-model="selectedCompany">
<div class="input-group-prepend">
<span class="input-group-text fa fa-close" id="inputGroupPrepend"> </span>
</div>
<datalist id="companiesList">
<option ng-repeat="c in companies" >{{ c }}</option>
</datalist>
</div>
</li>
<li>
<div class="t input-group">
<input type="text" class="form-control" placeholder="Keyword" ng-model="newKeyword">
<button ng-click="addKeyword(selectedCompany)" class="btn btn-primary" ng-disabled="!newKeyword || !selectedCompany">
<span class="fa fa-plus"></span> Add Keyword</button>
</div>
</li>
<li>
<div class="t keywordsList">
<span class="keyword-box" ng-repeat="k in keywordTree[selectedCompany]">
{{ k }} <i class="fa fa-close" ng-click="removeTag(k, selectedCompany)"></i>
</span>
</div>
</li>
<ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-info" id="headingTwo">
<h5 class="mb-0">
<button class="btn text-light" data-toggle="collapse" data-target="#Others" aria-expanded="false" aria-controls="collapseTwo">
Others
</button>
</h5>
</div>
<div id="Others" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('treeApp', []);
app.controller('treeController', function($scope) {
$scope.companies = [
'Apple',
'Microsoft',
'Google',
'IBM',
];
$scope.keywordTree = {};
$scope.companies.forEach(function(c){
$scope.keywordTree[c] = [];
})
$scope.addKeyword = function(sc){
if($scope.keywordTree[sc].includes($scope.newKeyword)){
alert("This keyword already exists")
}else{
$scope.keywordTree[sc].push($scope.newKeyword);
}
$scope.newKeyword = '';
}
$scope.removeTag = function(t , sc){
alert('are you sre you want to remove ' + t + 'from list
')
var idx = $scope.keywordTree[sc].indexOf(t);
$scope.keywordTree[sc].splice(t, 1);
}
});
</script>
</body>
</html>
code,
kbd,
pre,
.col-12,
.card,
.card-header,
#accordion,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
border-radius:0 !important;
}
.panel-heading.collapsed .fa-chevron-up,
.panel-heading .fa-chevron-down {
display: none;
}
.panel-heading.collapsed .fa-chevron-down,
.panel-heading .fa-chevron-up {
display: inline-block;
}
i.fa {
cursor: pointer;
margin-right: 5px;
}
.form-per{
background-color: #e9ecef !important;
border-right : none
}
.form-per::placeholder::before{
contain: '*';
/* color: red; */
}
.input-group-text{
border-left: none;
}
.card-body{
padding-top: 0;
}
.collapsed{
left: 20px;
}
li{
padding-top: 10px;
}
ul, li { list-style: none; }
.t:before {
content: '----';
margin-left: -20px;
/* margin-right: 10px; */
}
ul {
padding-left: 20px;
border-left: 1px dashed black;
}
ul {
padding-left: 20px;
border-left: 1px dashed black;
}
ul {
border-left: 1px dashed black;
}
.keywordsList {
width: 100%;
padding: 3px;
border: 1px dashed black
}
.keyword-box{
border: 1px solid black;
padding: 2px;
margin: 5px;
}