当前位置:首页 > 编程教程 > javascript技术文章 > JS创建Tag标签的方法详解

JS创建Tag标签的实例方法总结

  • 发布时间:
  • 作者:码农之家
  • 点击:186

这篇文章主要知识点是关于JS、Tag标签、3种高效的Tags标签系统数据库设计方案分享 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript+Vue+React全程实例
  • 类型:JS实例大小:59150 MB M格式:PDF作者:郑均辉,薛燚
立即下载

JS创建Tag标签的方法详解

本文实例讲述了JS创建Tag标签的方法。分享给大家供大家参考,具体如下:

一 . 创建标签其原理就是

创建一个节点;

var x = document.createElement("TagName")

赋予节点样式;

x.setAttribute("class",类名)

对节点进行赋值;

x.innerHTML = 内容 //赋值

添加节点到父元素

要添加到的元素.appendChild(x);

二. 样式图:

JS创建Tag标签的方法详解

三. 主要代码流程:

HTML部分:

<div class="container">
    <h3 >单击下面得"添加"按钮添加标签</h3>
    <div class="dispanel" id="box"></div>
    <button class="btn" id="btn1">全部清除</button>
    <ul id="ul">
      <li><span>John Doe1</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe2</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe3</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe4</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe5</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe6 </span><button class="clibtn btn">添加</button></li>
    </ul>
</div>

css部分:

body{
  margin:0 ;
  padding:0;
  background-color:#002F4F;
  color: #ffffff;
  font-family: "微软雅黑";
  font-size: 1em;
}
ul,h3{margin: 0;
  list-style: none;
padding: 0px}
.container{
  width:300px;
  height:350px;
  margin: 50px auto;
}
.dispanel{
  width: 290px;
  height:50px;
  background-color: #ffffff;
  margin: 0 auto;
}
.btn{
  width:100px;
  height:20px;
  color: #ffffff;
  background-color:red;
  border: 0px;
  font-size: 1em;
  margin:10px 0 10px 5px;
}
.container ul li{
  width:300px;
  height:30px;
  margin-top:10px;
}
.spanstyle{display: inline-block;
  color:#000;
  width:85px;height:22px;
  background-color: bisque;
  margin-left:5px;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
}

js部分:

var oUl = document.getElementById("ul");
var oBtn = oUl.getElementsByClassName("btn");
var oLi = document.getElementsByClassName("li");
var oBox = document.getElementById("box");
for(var i = 0;i<oBtn.length;i++) {
    oBtn[i].onclick = function () {
      var oA = document.createElement("span");  //创建一个节点Node
      var oNew = oA.setAttribute("class", "spanstyle"); //将节点上增加class样式
      var ospan = this.previousElementSibling.innerHTML + " X"; //this == oBtn[i] / previousElementSiling:上一个元素的兄弟节点 即 <span>
      oA.innerHTML = ospan; //将ospa的值付给新创建的节点Node oA.
      oBox.appendChild(oA); //将oA 添加为oBox的儿子
      oA.onclick=function () {
        oBox.removeChild(oA); //移除这个元素
      }
    }
}
var obtn1 = document.getElementById("btn1");
obtn1.onclick=function () {
    oBox.innerHTML=""; //清除内容
}

更多关于JavaScript相关内容可查看本站专题:《JavaScript页面元素操作技巧总结》、《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

3种高效的Tags标签系统数据库设计方案分享

需求背景

目前主流的博客系统、CMS都会有一个TAG标签系统,不仅可以让内容链接的结构化增强,而且可以让文章根据Tag来区分。相比传统老式的Keyword模式,这种Tag模式可以单独的设计一个Map的映射表来增加系统的负载和查询的效率。

数据库设计方案1

此方案分为2个表:

1.Tag表
2.文章表

Tag表表结构:


tagid # tag标签的ID
tagname #tag内容
num #当前Tag的引用个数

文章表结构:

ID #文章ID
title #文章标题
tags #tags列表,多个以,分割
tagid #tags的ID 多个以,分割
...

此种方式Tag标签主要内容保存在 文章表 中,对于Tag表的压力较小,只是添加的时候更新一下Tag的引用数量,但是查询的时候效率不足,不是好办法

数据库设计方案2

第二种方案使用2个Tag表,其中一个保存Tag信息,另一个保存映射信息:

Tag表:


tagid # tag标签的ID
tagname #tag内容
num #当前Tag的引用个数

Tagmap表

tagid
aid

文章表

ID #文章ID
title #文章标题
tags #tags列表,多个以,分割
...

这种形式,每次发布内容和修改内容的时候 都去更新一下Tag表和 Tagmap表。

查询的时候需要从Tagmap表中查找响应的文章ID,然后使用文章ID去查询具体的文章信息,因为每次查询都是使用索引,所以效率较高。

数据库设计方案3

前两种方案都是使用纯粹的Mysql来设计的,第三种方案将使用Nosql的魅力来设计。

基本结构同方案2,只是在Tag表和Tagmap表中使用mongo/redis这样的nosql数据库服务器,这样可以发挥nosql数据库强大的线性查询能力。

1) 第一种方式的表结构设计与方案2完全相同,只是数据库服务器换了。

2)其他的方案,当然是发挥Nosql的线性能力来设计存储的Key了,尤其是使用redis的时候,使用的Key的结构可以完美的提高查询效率

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.190674

easyui-edatagrid.js实现回车键结束编辑功能的实例

easyui的可编辑表格并不具备回车事件。这让edatagrid在结束编辑时的操作很麻烦,除非你点击其他行,或者点出表格否则不会取消编辑行。 为了让结束编辑操作更简单些,我为每个单元格添加了回车事件,当回车时结束本行编辑,具体做法是重写edatagrid的onDblClickCell事件,如下: onDblClickCell : function(index, field, value) { if (opts.editing) { $(this).edatagrid('editRow', index); focusEditor(field); //以下是我添加的代码 var currentEdatagrid = $(this); $('.datagrid-editable .textbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keydown', function(e){ var code = e.keyCode || e.which; if(code == 13){ $(currentEdatagrid).datagrid('acceptChanges'); $(currentEdatagrid).datagrid('endEdit', index); } }); //添加代码结束 } if (opts.onDblClickCell) { opts.onDblClickCell.call(target, index, field,value); }}, 也可以单独添加一个onEnterCell事件,在……

网友NO.830808

EasyUI的DataGrid绑定Json数据源的示例代码

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: table id="dg" class="easyui-datagrid" title="需要设置表格标题" data-options=" rownumbers:true, singleSelect:true, @*autoRowHeight:false,*@ pagination:true @*pageSize:10*@" thead tr th field="colum1"列1/th th field="colum2"列2/th th field="colum3"列3/th th field="colum4"列4/th th field="colum5"列5/th th field="colum6"列6/th /tr /thead /table JS代码: (function ($) { function pagerFilter(data) { if ($.isArray(data)) { // is array data = { total: data.length, rows: data } } var target = this; var dg = $(target); var state = dg.data('datagrid'); var opts = dg.datagrid('options'); if (!state.allRows) { state.allRows = (data.rows); } if (!opts.remoteSort opts.sortName) { var names = opts.sortName.split(','); var orders = opt……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com