ajaxchen_615
ajaxchen_615

javascript 动态添加表格行

 

javascript 动态添加表格行

动态添加表格行 

文/Ray

表格部分代码如下：

<table id="testTbl" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr bgcolor=#0000FF>

<td width=6%><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

动态添加表行的javascript函数如下：

function addRow(){

//添加一行

var newTr = testTbl.insertRow();

//添加两列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">'; 

newTd2.innerText= '新加行';

}

就这么简单，做点详细的说明：

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

insertCell()和insertRow的用法相同。

2、动态设置属性和事件

上面行数中的innerHTML和innerText都是列的属性。

这个inner，就是“inner”到<tb></tb>之间，innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单，这个解释挺多余的)

设置其他属性也是用同样的方式，比如，设置行背景色

newTr.bgColor = 'red';



设置事件也一样，需要简单说明一点。

比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下：

function newClick(){

alert("这是新添加的行");

｝

对onclick事件设置这个函数的代码如下：

newTr.onclick = newClick;

这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号，

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

上面的写法都是错误的。

为什么，其实知道为什么没有什么意思，知道怎么用就OK了，如果不想知道，可以跳过下面这一段。



实际上这个=后面的newClick是指向自己定义的newClick函数的指针，javascript里面函数名就是指向函数的指针，加了引号括号什么的浏览器就找不到那个函数了。

下面的写法，也是正确的

newTr.onclick = function newClick(){

alert("这是新添加的行");

｝
 
 
 
 
 
 
 
例子
 

一、创建表格(观看效果）

<html>
<head>
<title>Table test</title>
</head>
<body>
<div id="tableTest">

</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");

//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");

//创建5行
for(var i=0;i<5;i++){
 var _tr=_table.insertRow(i);
 //创建4列
 for(var j=0;j<4;j++){
  var _td=_tr.insertCell(j);
  var _tn=document.createTextNode(i.toString()+j.toString());
  _td.appendChild(_tn);
 }
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script>

 二、添加、删除行与列（观看效果）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>


</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td>00</td>
            <td>01</td>
            <td>02</td>
            <td>03</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>30</td>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
        <tr>
            <td>40</td>
            <td>41</td>
            <td>42</td>
            <td>43</td>
        </tr>
    </tbody>
</table>
<br/>
<input type="button" value="删除一行" onclick="deleteRow()"/>&nbsp; &nbsp;
<input type="button" value="删除一列" onclick="deleteColumn()"/>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");

//定义函数，用于删除第一行
function deleteRow(){
 _table.deleteRow(0);
}
//定义函数，用于删除第一列
function deleteColumn(){
 //删除一列时需要对每一行分别进行列删除
 for(var i=0;i<_table.rows.length;i++){
  _table.rows[i].deleteCell(0);
 }
}
//-->
</script>

三、交换两行的位置（观看效果）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
<style type="text/css">
<!--
td  { text-align:center;font-size:12px;padding:3px;}
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td width="25%">1</td>
            <td width="25%">11</td>
   <!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
            <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>22</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>33</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>44</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>55</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
 //遍历element的子结点
 for (var i = 0; i < element.childNodes.length; i++) {
  var node = element.childNodes[i];
  //判断是否是空白文本结点，如果是，则删除该结点
  if (node.nodeType == 3 && !//S/.test(node.nodeValue)) 
  node.parentNode.removeChild(node);
 }
}
//获得表格对象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是第一行，则与上一行交换顺序
 if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是最后一行，则与下一行交换顺序
 if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
 //获取父结点
 var _parent=node1.parentNode;
 //获取两个结点的相对位置
 var _t1=node1.nextSibling;
 var _t2=node2.nextSibling;
 //将node2插入到原来node1的位置
 if(_t1)_parent.insertBefore(node2,_t1);
 else _parent.appendChild(node2);
 //将node1插入到原来node2的位置
 if(_t2)_parent.insertBefore(node1,_t2);
 else _parent.appendChild(node1);
}
//-->
</script>

 

 

上周因为手头一个东西需要增加不定项目，左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳，他给了我一个办法，用Javascript动态添加删除表格行的思路，并演示了一下，符合我的要求，于是拿出来与大家共分享

以下是我测试的代码
<%
 
 If Request("dd")<>"" Then
  Response.write(Ubound(split(request("dd"),",")))
 End If

%>
<html>
<head>
<script>
var i = 0;
function add() {
 i++;
 var tbl = document.all.tbl;
 var tr = tbl.insertRow();
 var td = tr.insertCell();
 td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>

<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>

<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>

添加之后同时将值存在一个隐藏表单域中，以便提交时使用，使用数组方法接收值。

今日在网上搜索，发现一个网友的博客中也有相关代码，于是帖过来一起参考。

<table id="idTB" border=0><!--注意id，与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
    
 idTB.deleteRow(sIndex);
  
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>

上周因为手头一个东西需要增加不定项目，左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳，他给了我一个办法，用Javascript动态添加删除表格行的思路，并演示了一下，符合我的要求，于是拿出来与大家共分享

以下是我测试的代码
<%
 
 If Request("dd")<>"" Then
  Response.write(Ubound(split(request("dd"),",")))
 End If

%>
<html>
<head>
<script>
var i = 0;
function add() {
 i++;
 var tbl = document.all.tbl;
 var tr = tbl.insertRow();
 var td = tr.insertCell();
 td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>

<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>

<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>

添加之后同时将值存在一个隐藏表单域中，以便提交时使用，使用数组方法接收值。

今日在网上搜索，发现一个网友的博客中也有相关代码，于是帖过来一起参考。

<table id="idTB" border=0><!--注意id，与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
    
 idTB.deleteRow(sIndex);
  
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>

精通javascript编程
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
一个完整的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>WebForm1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content=" http://schemas.microsoft.com/intellisense/ie5">
        <style type="text/css"> .button {}{ background-color: #003399; border-bottom-style:solid; color:#FFFFFF;font-size:12px; border-color:#000000; border-style:solid;cursor:pointer;border-width:thin; border-width:1px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; }
    .showtalbe {}{}
    .showtable font{}{ color:#000000; font-size:12px; font-family:"新宋体"}
    .showtable tbody{}{ background-color:#CCCCCC; font-size:12px;text-align:left;word-break:break-all;}
    .showtable thead{}{ background-color:#003399; height:20px;line-height:15px; color:#FFFFFF; font-size:12px; font-family:"新宋体";text-align:left;}
    .showtable td{}{padding-left:8px;}
    .inputNormal {}{ font-size:12px; font-family:'新宋体'; color: #000000; cursor:pointer; background-color:#cccccc; width:200px; text-align:left; border-color: #cccccc; border-style:solid; border-width:1px; height:30px; overflow-x:hidden; overflow-y:auto; }
        </style>
        <script>
 //给string增加去首尾空白的方法
  String.prototype.trim = function(){return this.replace(/(^/s*)|(/s*$)/g, "");}
  var startID = 1;
  
  function $(objID)
  {
            return document.getElementById(objID);
  }
  
  //自动添加
  function adddataauto()
  {
            var objTable =$("objTable");
            var newID = startID++ ;
            var newName  = "name" + newID ;
               
            addtr(newID,newName);
            addoption(newID,newName);
  
  }
  
  //手工添加
  function adddatamanual()
  {
            var newID = $("caseID").value;
            var newName = $("caseName").value;
               
            //检查数据格式是否正确
            if(!checkregx(newID,newName))
                return;
            //检查ID是否存在
               
            if(!findvalueinselect(newID,$("selectList")))
            {
                alert(newID + "已经存在");
                return;
            }
               
            addtr(newID,newName);
            addoption(newID,newName);
        
  }
  
  //表格中添加一行
  function addtr(objID,objName)
  {
  //创建td节点
   var td0= document.createElement("td");
   var td1= document.createElement("td");
   var td2= document.createElement("td");
   var td3= document.createElement("td");
   
    
   var deleteButton = document.createElement("input");
   var checkBox     = document.createElement("input"); 
   var textArea     = document.createElement("textarea"); 
    
    //设置td样式
   td0.setAttribute("width","26px");
   td1.setAttribute("width","15px");
   td2.setAttribute("width","73px");
   td3.setAttribute("width","50px");
   
  
   deleteButton.setAttribute("type","button");
   deleteButton.setAttribute("id","deleteButton" + objID);
   deleteButton.setAttribute("name","deleteBox"+ objID);
   deleteButton.setAttribute("value","delete");
   
   deleteButton.setAttribute("className","button");
   deleteButton.setAttribute("class","button");//for ff
   
   
   //设置deletebutton的事件
   deleteButton.onclick = function(event)
                          {
                            if(event == null)
                                {
                                 event = window.event; // For IE
                                }
                            var eventObj = event.srcElement? event.srcElement : event.target;   
                            
                            var tbodyNode = eventObj.parentNode.parentNode.parentNode;
                            var trNode = eventObj.parentNode.parentNode
                            var rowIndex = trNode.rowIndex;
                            var objTable = document.getElementById("objTable");
                            
                            objTable.removeChild(tbodyNode);
                            deleteoptions(rowIndex-1);
                          }
   
   //设置checkbox的样式
   checkBox.setAttribute("type","checkbox");
   checkBox.setAttribute("id","deleteBox");
   checkBox.setAttribute("name","deleteBox");
   checkBox.setAttribute("value",objID);
   
   //设置checkbox的事件
   
   checkBox.onclick = function(event)
   {
            if(event==null)
                {
                    event = window.event;
                }
            
            var eventObj = event.srcElement? event.srcElement : event.target;                           
            var checkBox =  eventObj;
            var trNode = checkBox.parentNode.parentNode
            var textBoxNode = checkBox.parentNode.nextSibling.nextSibling.childNodes[0];
            var checked =checkBox.checked;                   
            
            if(checked)//被选中时的样式
                {
                    trNode.style.backgroundColor="#8CC6FF";
                    textBoxNode.style.borderColor="#8CC6FF";
                    textBoxNode.style.backgroundColor="#8CC6FF";
                }
                else//取消选择时的样式
                {
                    trNode.style.backgroundColor="#CCCCCC";
                    textBoxNode.style.backgroundColor="#CCCCCC";
                    textBoxNode.style.borderColor="#CCCCCC";
                } 
   
   }

    //设置textarea的样式
   textArea.setAttribute("className","inputNormal");
   textArea.setAttribute("class","inputNormal");//for ff
   textArea.setAttribute("value",objName);
   textArea.setAttribute("id","myText");
   textArea.setAttribute("name","myText");
   textArea.value = objName;//for ff
   //设置textarea的事件
   
   textArea.onfocus = function(event)
   {
            if(event==null)
                {
                    event = window.event;
                }
            
            var obj = event.srcElement? event.srcElement : event.target;                           
            obj.style.backgroundColor="#ffffff";
            obj.style.height ="50px";
            obj.style.cursor = "text";
            obj.style.overflowY = "scroll";
            obj.inFocus=true;
   }
   
   textArea.onmouseover= function(event)
   {
            if(event==null)
                {
                    event = window.event;
                }
            
            var obj = event.srcElement? event.srcElement : event.target;                           
            if(!obj.inFocus)
            {
                obj.style.borderColor="#FF0000";
                obj.style.backgroundColor="#F0F8FF";
            }
   
   }
   
   
   textArea.onmouseout= function(event)
   {
            if(event==null)
                {
                    event = window.event;
                }
            
            var obj = event.srcElement? event.srcElement : event.target;                           
            var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;    
        
            if(obj.inFocus)//处于输入状态
                return;
            
            if(checkBoxNode.checked)//被选中
                {
                    obj.style.borderColor = "#8CC6FF";
                    obj.style.backgroundColor="#8CC6FF";
                    return;
                }
            
            if(!obj.inFocus)
                {
                    obj.style.borderColor = "#cccccc";
                    obj.style.backgroundColor="#cccccc";
                }
   
   }
    textArea.onblur= function(event)
    {
            if(event==null)
                {
                    event = window.event;
                }
            
            var obj = event.srcElement? event.srcElement : event.target;                           
            var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;
            if(checkBoxNode.checked)
              {
               obj.style.borderColor = "#8CC6FF";
               obj.style.backgroundColor="#8CC6FF";
              }
            else
             {
               obj.style.borderColor = "#cccccc";
               obj.style.backgroundColor="#cccccc";
             }
            obj.style.height ="30px";
            obj.style.overflowY = "auto";
            obj.style.cursor = "pointer";
            obj.inFocus=false;
   
   }
   
   
   td0.appendChild(checkBox);
   td1.innerHTML = objID;
   td2.appendChild(textArea);
   td3.appendChild(deleteButton);
   
   //创建tr节点
   var trNode = document.createElement("tr");
   trNode.appendChild(td0);
   trNode.appendChild(td1);
   trNode.appendChild(td2);
   trNode.appendChild(td3);
   
   //创建tbody节点，必须使用tbody，不然无法使用dom方式添家行，只能用insertRow
   var trBody = document.createElement("tbody");
   trBody.appendChild(trNode);
    
   $("objTable").appendChild(trBody);
  }
  
  
  //下拉菜单中添加一项
  function addoption(objID,objName)
  {
   var list1 = $("selectList");
   var opNode = document.createElement("option");
   opNode.text = objName;
   opNode.value =objID; 
   
   //必须用add而不能用appendchild，用appendchid文本值显示不出来？？
   list1.options.add(opNode);
   
  }
  
  //查找select中的value
  function findvalueinselect(p_objValue,p_objList)
  {
    for(i=0;i<p_objList.options.length;i++)
    {
    if(p_objList.options[i].value ==p_objValue)
        return false;
    }
    return true;
  }
  
  //删除选中的行
  function deleterows()
  {
   var objTable =$("objTable");
   var boxList = document.getElementsByName("deleteBox");
   var idArray = new Array();
   for(i=0;i<boxList.length;i++)
    {
      if(boxList[i].checked ==true)
        idArray.push(i);   
    }
   var rowIndex;
   var nextDiff =0;
   
   //面试的时候没考虑到rowindex变化，连续删除出错
   for(j=0;j< idArray.length;j++)
    {
      rowIndex = idArray[j]+1-nextDiff++
      objTable.deleteRow(rowIndex);
      deleteoptions(rowIndex-1);
    }
  
  }
  
  //删除下拉菜单对应的项
  function deleteoptions(itemIndex)
  {
    var list = $("selectList");
    list.remove(itemIndex);
  }
 
  //提交数据到服务器
  function checksubmit()
  {
   var postString = $("postString");
   var boxList =  document.getElementsByName("deleteBox");
   var textList = document.getElementsByName("myText"); 
   
   var idArray = new Array();
   for(i=0;i<boxList.length;i++)
    {
        idArray.push(boxList[i].value + "|" + textList[i].value);   
    }
   
   postString.value = idArray.join("-");
   alert(postString.value);
  
  }
  
  //正则式验证输入格式
  function checkregx(p_idCase,p_nameCase)
  {
    var regID=new RegExp("^[1-9]//d*$");
    var idValue = p_idCase.trim();
    var flag = true;
    var regName=new RegExp("^[a-zA-Z_][0-9a-zA-Z-_.]*$");
    var nameValue = p_nameCase.trim();;
      
    var noticeText="";
    if(regID.test(idValue)==false)
        {
            noticeText +="id必须为数字，并且大于0/n";
            flag = false;
        }
    if(!regName.test(nameValue))
        {
            noticeText +="name格式不合法";
            flag = false;
        }
    if(!flag)
       {
        alert(noticeText);
        return false;
       }
    
    return true;
  }
   
   //应用自定义的css样式
  function setcss()
  {
    var inputList = document.getElementsByTagName("input");
    for(i= 0;i<inputList.length;i++)   
    {   
        //验证页面上的文本框   
        if( inputList[i].type   ==   "button" ||
            inputList[i].type   ==   "submit" ||
            inputList[i].type   ==   "reset"  
           )   
            {   
             inputList[i].className="button";
            }    
    } 
  }
  
  //全选或者全不选
  function selectall()
  {      
    //ff中去name属性 ie中取id属性
    var objList = document.getElementsByName("deleteBox");
    
    for(i=0;i<objList.length;i++)
        {
            
            var checked =objList[i].checked;
            objList[i].checked=checked?false:true; 
            var trNode = objList[i].parentNode.parentNode;
            var textBoxNode = objList[i].parentNode.nextSibling.nextSibling.childNodes[0]
         
            if(!checked)//没被选中
             {
               trNode.style.backgroundColor = "#8CC6FF";
               textBoxNode.style.borderColor="#8CC6FF";
               textBoxNode.style.backgroundColor="#8CC6FF";
             }
            else
             {
               trNode.style.backgroundColor = "#CCCCCC";
               textBoxNode.style.backgroundColor="#CCCCCC";
               textBoxNode.style.borderColor="#CCCCCC";
             }
        }
  }   
        </script>
    </HEAD>
    <body onload="setcss();">
        <form id="Form1" method="post" runat="server" onsubmit="return checksubmit();">
            <input type="hidden" id="postString"> 
            <div>
                <table id="objTable" class="showtable">
                    <thead>
                        <tr>
                            <td width="26"><input type="checkbox" id="selectAll" onclick="selectall();"></td>
                            <td width="15">id</td>
                            <td width="210">name</td>
                            <td width="73">delete</td>
                        </tr>
                    </thead>
                </table>
                <table>
                    <tr>
                        <td>
                            <select id="selectList">
                                <option title="" value="0" selected>所有项目</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <input type="button" value="add new row" onclick="adddataauto();"> <input type="button" value="delete rows" onclick="deleterows()">
                <input type="submit" value="submit">
            </div>
            <table>
                <tr>
                    <td style="HEIGHT: 21px">id 大于1</td>
                    <td style="HEIGHT: 25px">name 数字，字母，-_.</td>
                </tr>
                <tr>
                    <td><input type="text" id="caseID"></td>
                    <td><input type="text" id="caseName"></td>
                </tr>
                <tr>
                    <td><input type="reset" value="  reset  "></td>
                    <td><input type="button" value="manual new" onclick="adddatamanual();"></td>
                </tr>
            </table>
        </form>
    </body>
</HTML>

 

关于如何删除掉select中的option元素，兼容IE、Firefox ...

[ 2006-10-31 15:56:04 | 作者:  CNLei ]
之前使用的代码是：
function delOption(oSel){ // 删除option
 if (oSel.selectedIndex>=0) {
  oSel.options.remove(oSel.selectedIndex);
 } else {
  alert("请先至少选择一个关键字");
 };
}
上述代码在IE下正常运行，但在Firefox下却报错：
oSel.options.remove is not a function.

最后发现只要作一下小改动就可兼容IE和FF ：）
改动后的代码如下：
function delOption(oSel){ // 删除option
 if (oSel.selectedIndex>=0) {
  oSel.remove(oSel.selectedIndex);
 } else {
  alert("请先至少选择一个关键字");
 };
}

上述两段代码的区别在于一个用了options，一个没用，即：
oSel.options.remove(oSel.selectedIndex);
oSel.remove(oSel.selectedIndex);
这两种写法IE都支持，但FF只支持后一种。

下面贴段完整的删除option的兼容IE、Firefox的实例代码，可一次删除多个被选中的options。
代码如下：
<!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" lang="gb2312">
<head>
<head>
<title> 一次删除多个被选中的options ， 兼容IE、Firefox ...</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,[email protected]">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<script type="text/javascript">
function delOption(oSel){
 if (oSel.selectedIndex>=0) {
 oSel.remove(oSel.selectedIndex);
 delOption(oSel);
 }
}
</script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<select class="SltBar" name="MySel" size="10" multiple="true">
 <option value="IECN.NET">IECN.Net-JavaScript</option>
 <option value="IECN.NET">IECN.Net-XHTML/CSS</option>
 <option value="IECN.NET">IECN.Net-ASP/VBScript</option>
 <option value="IECN.NET">IECN.Net-PHP/MySql</option>
 <option value="IECN.NET">IECN.Net-.Net开发</option>
 <option value="IECN.NET">IECN.Net-Java开发</option>
</select>
<input type="button" value="删除选中的option" onclick="delOption(this.form.MySel);" />
</form>
</body>
</html>

应用实例二：
<!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" lang="gb2312">
<head>
<head>
<title> 代码实例：添加、删除域名列表</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,[email protected]">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<script type="text/javascript">
function delOption(oSel){
 if (oSel.selectedIndex>=0) {
 oSel.remove(oSel.selectedIndex);
 delOption(oSel);
 }
}

function addOption(oSel,sVal){
 for(var i=0;i<oSel.length;i++){
 if (oSel.options[i].value==sVal){
 alert("已存在："+sVal+"/n/n请不要添加重复数据！");
 return false;
 }
 }
 var oOption=new Option(sVal,sVal);
 oSel[oSel.length]=oOption;
}

</script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<input type="text" name="siteUrl" size="50" value="google.com" />&nbsp;<input type="button" value="添加至列表" onclick="addOption(this.form.siteList,this.form.siteUrl.value);" /><br />
已有域名列表：<br />
<select name="siteList" size="10" multiple="true" size="10" style="width:300px;">
 <option value="265.com">265.com</option>
 <option value="cnlei.com">cnlei.com</option>
 <option value="iecn.net">iecn.net</option>
 <option value="dodo.hk">dodo.hk</option>
</select>
<input type="button" value="删除选中的域名" onclick="delOption(this.form.siteList);" />(可一次性选中多个进行删除)<br />
<input type="submit" class="InpBtn" value="保存已添加的域名列表" />
</form>
</body>
</html>

 

你可能感兴趣的:(JavaScript,function,table,input,firefox,button)

  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 每日一题——第八十四题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
  • 每日一题——第八十二题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将一个控制台输入的字符串中的所有元音字母复制到另一字符串中#include#include#include#include#defineMAX_INPUT1024boolisVowel(charp);intmain(){charinput[MAX_INPUT];charoutput[MAX_INPUT];printf("请输入一串字符串：\n");fgets(input,sizeof(inp
  • 每日一题——第八十三题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：将输入的整形数字输出,输出1990，输出"1990"#include#defineMAX_INPUT1024intmain(){intarrr_num[MAX_INPUT];intnum,i=0;printf("请输入一个数字：");scanf_s("%d",&num);while(num!=0){arrr_num[i++]=num%10;num/=10;}printf("\"");for(
  • SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 【PG】常见数据库、表属性设置 江无羡 数据库
    PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH
  • xilinx vivado PULLMODE 设置思路 坚持每天写程序 fpga开发
    1.xilinx引脚分类XilinxIO的分类：以XC7A100TFGG484为例，其引脚分类如下：1.UserIO(用户IO)：用户使用的普通IO1.1专用(Dedicated)IO：命名为IO_LXXY_#、IO_XX_#的引脚，有固定的特定用途，多为底层特定功能的直接实现，如差分对信号、关键控制信号等，不能随意变更。1.2多功能(Multi-Function)IO：命名为IO_LXXY_ZZ
  • 推荐算法_隐语义-梯度下降 _feivirus_ 算法机器学习和数学推荐算法机器学习隐语义
    importnumpyasnp1.模型实现"""inputrate_matrix:M行N列的评分矩阵，值为P*Q.P:初始化用户特征矩阵M*K.Q:初始化物品特征矩阵K*N.latent_feature_cnt:隐特征的向量个数max_iteration:最大迭代次数alpha:步长lamda:正则化系数output分解之后的P和Q"""defLFM_grad_desc(rate_matrix,l
  • 用Python实现简单的猜数字游戏 程序媛了了 python游戏java
    猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • 2023最详细的Python安装教程（Windows版本） 程序员林哥 Pythonpythonwindows开发语言
    python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins
  • C++八股 Petrichorzncu 八股总结c++开发语言
    这里写目录标题C++内存管理C++的构造函数，复制构造函数，和析构函数深复制与浅复制：构造函数和析构函数哪个能写成虚函数，为什么？C++数据结构内存排列结构体和类占用的内存：==虚函数和虚表的原理==虚函数虚表（Vtable）虚函数和虚表的实现细节==内存泄漏==指针的工作原理函数的传值和传址new和delete与malloc和freeC++内存区域划分C++11新特性C++常见新特性==智能指针
  • Table列表复现框实现【勾选-搜索-再勾选】 ～四时春～ java开发语言elementuivue
    Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • 【RabbitMQ 项目】服务端：数据管理模块之绑定管理 月夜星辉雪 rabbitmq分布式
    文章目录一.编写思路二.代码实践一.编写思路定义绑定信息类交换机名称队列名称绑定关键字：交换机的路由交换算法中会用到没有是否持久化的标志，因为绑定是否持久化取决于交换机和队列是否持久化，只有它们都持久化时绑定才需要持久化。绑定就好像一根绳子，两端连接着交换机和队列，当一方不存在，它就没有存在的必要了定义绑定持久化类构造函数：如果数据库文件不存在则创建，打开数据库，创建binding_table插入
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 【Java】已解决：java.util.concurrent.CompletionException 屿小夏 java开发语言
    文章目录一、分析问题背景出现问题的场景代码片段二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：java.util.concurrent.CompletionException一、分析问题背景在Java并发编程中，java.util.concurrent.CompletionException是一种常见的运行时异常，通常在使用CompletableFuture进行异步计算时出现
  • Android实现监听事件的方法 Amy木婉清
    1.通过内部类实现2.通过匿名内部类实现3.通过事件源所在类实现4.通过外部类实现5.布局文件中onclick属性(针对点击事件)1.通过内部类实现代码:privateButtonmBtnEvent;//oncreate中mBtnEvent.setOnClickListener(newOnClick());//内部类实现监听classOnClickimplementsView.OnClickLis
  • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
  • 单例（Singleton）模式 aoyouzi 单例模式Singleton
    3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
  • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
          现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
  • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
    <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
  • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
    struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
  • 推荐10个在线logo设计网站 362217990 logo
    在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
  • jsp上传文件 香水浓 jspfileupload
    1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
  • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
    框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
  • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
    我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
  • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
    统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
  • Android SDK 国内镜像 BigBird2012 android sdk
    一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
  • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
    一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
  • [Maven学习笔记二]Maven命令 bit1129 maven
    mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
  • 【Java命令二】jhat bit1129 Java命令
    jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
  • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
    进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
  • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
    网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
  • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
    import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
  • struts2获得request、session、application方式 chiangfai application
    1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
  • 改变python的默认语言设置 chenchao051 python
    import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
  • mysql导入数据load data infile用法 daizj mysql导入数据
    我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
  • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
    跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
  • 22岁到72岁的男人对女人的要求 dcj3sjt126com
    22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
  • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
    A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
  • NoSql 数据库的特性比较 geeksun NoSQL
    Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
  • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
    转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
  • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
    视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
  • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
    hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
  • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
    作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
  • 开发环境搭建 独浮云 eclipsejdktomcat
           最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
  • 操作日期和时间的工具类 vipbooks 工具类
       大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他