JavaScript实现添加、查找、删除元素

代码很简单，这里就不多废话了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
.reply {
  width: 500px;
  height: 100%;
  overflow: hidden;
  background-color:#CCC;
  margin-top: 10px;
}
.infoArea {
  width: 380px;
  height: 100%;
  overflow: hidden;
}
.words {
  width: 380px;
  height: auto;
  margin: 5px 0px;
  float: left;
  font-size: 14px;
}
.time {
  margin-left: 10px;
  margin-bottom: 3px;
  width: 150px;
  height: 20px;
  line-height: 20px;
  float: left;
  font-family: 楷体;
  font-size: 14px;
  color: #999;
}
.replyButton {
  width: 60px;
  height: 20px;
  float: left;
  margin-bottom: 10px;
}
.replyButton input {
  font-size: 12px;
}
#cancelButton {
  visibility: hidden;
}
</style>
</head>

<body>
<div class="reply">
 <div class="infoArea">
  <div class="words"><a href="">中央情报局</a>:中央情报局</div>
  <div class="time">2014年5月4日21:56</div>
  <div class="replyButton">
   <input type="button" id="submitButton" value="回复" onClick="showReplyArea(this)" />
  </div>
  <div class="replyButton">
   <input type="button" id="cancelButton" value="取消" onClick="hideReplyArea(this)" />
  </div>
 </div>
</div>
<script>
//显示文本框的函数
function showReplyArea(src)
{
  inputText = document.createElement("DIV");
  inputText.className = "inputText";
  inputText.style.width = '100%';
  inputText.style.height = '75px';
  inputText.style.margin = '3px 0';
  inputText.style.cssFloat = 'left';

  var grandfather = src.parentNode.parentNode.parentNode;
  grandfather.appendChild(inputText);

  form1 = document.createElement("FORM");
  form1.action = "";
  form1.method = "post";
  inputText.appendChild(form1);

  inputTextArea = document.createElement("TEXTAREA");
  inputTextArea.style.width = '380px';
  inputTextArea.style.height = '40px';
  inputTextArea.style.marginLeft = '60px';
  inputTextArea.style.marginTop = '3px';
  inputTextArea.style.cssFloat = 'left';
  inputTextArea.style.resize = 'none';

  textSubmit = document.createElement("INPUT");
  textSubmit.type = 'submit';
  textSubmit.value = '提交';
  textSubmit.style.marginLeft = '80px';
  textSubmit.style.cssFloat = 'left';

  form1.appendChild(inputTextArea);
  form1.appendChild(textSubmit);

  cancelButton = grandfather.getElementsByTagName("INPUT").item(1);
  cancelButton.style.visibility = 'visible';
  submitButton = src;
  submitButton.disabled = true;
}
//隐藏文本框的函数
function hideReplyArea(src)
{
  var grandfather = src.parentNode.parentNode.parentNode;
  var inputText = grandfather.getElementsByClassName('inputText').item(0);
  grandfather.removeChild(inputText);

  cancelButton = src;
  cancelButton.style.visibility = 'hidden';
  submitButton = grandfather.getElementsByTagName("INPUT").item(0);
  submitButton.disabled = false;
}

//下面为调试时测试用函数，做完后就没用了，但也是很经典的一段代码，就留在这里了。
function showNode()
{
  var i = 4;
  submitButton = document.getElementById('submitButton');
  i = submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value;
  alert(i);
}
</script>
</body>
</html>

示例二：

window.onload = function(){
var gaga = document.getElementById( "gaga" );
addClass( gaga,"gaga1" )
addClass( gaga,"gaxx" );
removeClass( gaga,"gaga1" )
removeClass( gaga,"gaga" )
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
};
};
};

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • js正则查找match()与替换replace()用法实例

    本文实例讲述了js中正则的查找match()与替换replace()的用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> //string.match(正则):正则查找字符串,返回符合正则的字符或字符串 function t1(){  var con = document.getElementsByName('content')[0].value;/

  • javascript查找字符串中出现最多的字符和次数的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript常用经典算法实例详解

    javascript常用经典算法实例详解

    本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要搜索的值 function linearSearch(A, x) { for (var i = 0; i < A.length; i++) { if (A[i] == x) { return i; } } return -1; } 二分查找(又称折半查找) - 适用于已排好序的

  • JavaScript使用二分查找算法在数组中查找数据的方法

    本文实例讲述了JavaScript使用二分查找算法在数组中查找数据的方法.分享给大家供大家参考.具体分析如下: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序排列,将表中间位置记录的关键字与查找关键字比较,如果两者相等,则查找成功:否则利用中间位置记录将表分成前.后两个子表,如果中间位置记录的关键字大于查找关键字,则进一步查找前一子表,否则进一步查找后一

  • javascript折半查找详解

    折半查找法: 在有序表中,把待查找数据值与查找范围的中间元素值进行比较,会有三种情况出现: 1)     待查找数据值与中间元素值正好相等,则放回中间元素值的索引. 2)     待查找数据值比中间元素值小,则以整个查找范围的前半部分作为新的查找范围,执行1),直到找到相等的值. 3)     待查找数据值比中间元素值大,则以整个查找范围的后半部分作为新的查找范围,执行1),直到找到相等的值 4)     如果最后找不到相等的值,则返回错误提示信息. 按照二叉树来理解:中间值为二叉树的根,前半部

  • JS折半插入排序算法实例

    本文实例讲述了JS折半插入排序算法.分享给大家供大家参考,具体如下: function pushArrayWithIndex(arr, index, value) { // 将元素添加到数组的指定位置 var temArr = arr.slice(0, index); temArr.push(value); return temArr.concat(arr.slice(index)); } /* test for pushArrayWithIndex var arr = [1, 2, 3, 4,

  • javascript笛卡尔积算法实现方法

    本文实例讲述了javascript笛卡尔积算法实现方法.分享给大家供大家参考.具体分析如下: 这里可根据给的对象或者数组生成笛卡尔积 //笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIndex = null; var tempCount = 0; var temp = []; //根据参数列生成指针对象 for(var index in list)

  • js数组去重的5种算法实现

    1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已

  • Javascript实现快速排序（Quicksort）的算法详解

    Javascript实现快速排序（Quicksort）的算法详解

    目前,最常见的排序算法大概有七八种,其中"快速排序"(Quicksort)使用得最广泛,速度也较快.它是图灵奖得主C. A. R. Hoare(1934--)于1960时提出来的. "快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元素,都移到"基准"的左边:所有大于"基准"的元素,都移到"

  • JavaScript中几种排序算法的简单实现

    排序算法的实现 我的JS水平就是渣渣,所以我就用类似于JAVA和C的方式来写JavaScript的排序算法了. 而且这里我不讲算法原理,仅仅只是代码实现,可能会有Bug,欢迎大家博客评论指导. 插入排序 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已

  • js实现的二分查找算法实例

    本文实例讲述了js实现的二分查找算法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> </style> <script type="text/javascript"> var binarySearch = function(array, s

随机推荐