剔除行的点子实例详解,JavaScript动态增添列的点

作者:Web前端

本文实例叙述了JavaScript动态增添列的措施。分享给大家供我们参照他事他说加以考察。具体落真实景况势如下:

正文实例叙述了JavaScript完成动态删除列表框值的法子。分享给大家供大家参谋。具体如下:

正文实例陈诉了JavaScript完结动态增进,删除行的措施。共享给大家供我们参照他事他说加以考察。具体如下:

/*** 
 * 动态添加table 列 
 * @param result 
 */ 
function addRow(resultJson){ 
/* var temp = []; 
 temp = $.grep(arr, function(val, key) { 
  if(val.indexOf('c') != -1) 
   return true; 
// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素 
// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素 
 }, false); 
 console.dir(temp); 
 */ 
 if(resultJson!=""){ 
   var cv_arr=new Array(); 
   var date_arr = new Array(); 
//将数据源解析,并解析成程序可认的date及result 
   $.each(resultJson, function(index, val) { 
    if(val['parser_schedule']!=null){ 
     cv_arr.push(val['parser_schedule']); 
     var temp_data =val['parser_schedule'].split(","); 
     for(i=0;i<temp_data.length;i  ){ 
      var temp = temp_data[i].split(":"); 
      date_arr.push(temp[0]); 
     } 
    } 
   }); 
   date_arr = unique(date_arr); 
  date_arr.in_arr = function(value) { 
   var a = this;
   //为了增加方法扩展适应性。我这稍微修改了下 
   for (var i = 0; i < a.length; i  ) { 
    if (a[i] == value) 
     return i; 
   } 
  } 
  //ARR下标值从0开始 
  var old_td_n = $("#mytable thead tr").find("th").length;
  //获取已有的TH 
  //设置TH信息 
  for(i=0;i<date_arr.length;i  ){ 
   //注意TH和TD,样式不一样 
   $("#mytable thead tr").append("<th>" date_arr[i] "</th>"); 
   $("#mytable tbody tr").append("<td>-</td>"); 
  } 
  var rowNum_arr=new Array(); 
  //获取一共有多少行 
  for(i=0;i<$("#mytable").find("tr").length;i  ){ 
//获取每一行中第三列的值,table前两列隐藏,第三列开始判断是否有数据 
   var str=$("#mytable tbody").find("tr").eq(i); 
   var std=str.find("td").eq(2); 
   //当没有值的时候记录,获取行号 
   if($.trim(std.text()).length <1){ 
    rowNum_arr.push(i); 
   }else{ 
  //  $(std).html(""); 
   } 
  } 
  //设置TD信息 
  for(i=0;i<cv_arr.length;i  ){ 
   //获取RESULT_ARR中的日期数据 
   var temp_str = cv_arr[i];//OK 
   //将日期数据用","分割成数组 
   var temp_arr = temp_str.split(",");//OK [03-11:10,03-12:9,03-13:8,03-14:15] 
   for(j=0;j<temp_arr.length;j  ){ 
    //获取数据集 为字符串例如03-11:10 
    var temp_result = temp_arr[j]; 
    /* 
     将数据集分割为数组[03-11:10] 
     ARR[0] 03-11 
     ARR[1] 10 
    */ 
    var temp_result_arr = temp_result.split(":");
    //设置第I行的TR里的内容 
    $("#mytable tbody").find("tr").eq(rowNum_arr[i]).find("td").eq(old_td_n date_arr.in_arr(temp_result_arr[0])).html(temp_result_arr[1]);  
    // 应用样式 
    $("#tb tr:even td").addClass("alt");//行的颜色 
    $("#tb tr").find("td:eq(2)").addClass("spec"); 
    $("#tb tr:even").find("td:eq(2)").addClass("specalt"); 
   } 
  } 
 } 
}

采纳JavaScript 动态删除列表框中的值,实际使用中恐怕效果会相比复杂,那只是三个基本效能单元,非常多都以在此基础上扩充而来,运转代码点击“删除”,会将列表框中的值一一删除,只保留一项数据。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>增加Table行</title>
  </head>
<script language="javascript">// Example: obj = findObj("image1");
function findObj(theObj, theDoc){ 
var p, i, foundObj;
  if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) {  theDoc = parent.frames[theObj.substring(p 1)].document;  theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i  )   foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i  )   foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);  return foundObj;}
//添加一个参与人填写行
function AddSignRow(){ //读取最后一行的行号,存放在txtTRLastIndex文本框中 
 var txtTRLastIndex = findObj("txtTRLastIndex",document);
 var rowID = parseInt(txtTRLastIndex.value);
 var signFrame = findObj("SignFrame",document);
 //添加行
 var newTR = signFrame.insertRow(signFrame.rows.length);
 newTR.id = "SignItem"   rowID;
 //添加列:序号
 var newNameTD=newTR.insertCell(0);
 //添加列内容
 newNameTD.innerHTML = newTR.rowIndex.toString();
 //添加列:姓名
 var newNameTD=newTR.insertCell(1);
 //添加列内容
 newNameTD.innerHTML = "<input name='txtName"   rowID   "' id='txtName"   rowID   "' type='text' size='12' />";
 //添加列:电子邮箱
 var newEmailTD=newTR.insertCell(2);
 //添加列内容
 newEmailTD.innerHTML = "<input name='txtEMail"   rowID   "' id='txtEmail"   rowID   "' type='text' size='20' />";
 //添加列:电话
 var newTelTD=newTR.insertCell(3);
 //添加列内容
 newTelTD.innerHTML = "<input name='txtTel"   rowID   "' id='txtTel"   rowID   "' type='text' size='10' />";
 //添加列:手机
 var newMobileTD=newTR.insertCell(4);
 //添加列内容
 newMobileTD.innerHTML = "<input name='txtMobile"   rowID   "' id='txtMobile"   rowID   "' type='text' size='12' />";
 //添加列:公司名
 var newCompanyTD=newTR.insertCell(5);
 //添加列内容
 newCompanyTD.innerHTML = "<input name='txtCompany"   rowID   "' id='txtCompany"   rowID   "' type='text' size='20' />";

 //添加列:删除按钮
 var newDeleteTD=newTR.insertCell(6);
 //添加列内容
 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick="DeleteSignRow('SignItem"   rowID   "')">删除</a></div>";
 //将行号推进下一行
 txtTRLastIndex.value = (rowID   1).toString() ;
}
//删除指定行
function DeleteSignRow(rowid){
 var signFrame = findObj("SignFrame",document);
 var signItem = findObj(rowid,document);
 //获取将要删除的行的Index
 var rowIndex = signItem.rowIndex;
 //删除指定Index的行
 signFrame.deleteRow(rowIndex);
 //重新排列序号,如果没有序号,这一步省略
 for(i=rowIndex;i<signFrame.rows.length;i  ){
 signFrame.rows[i].cells[0].innerHTML = i.toString();
 }
}//清空列表
function ClearAllSign(){
 if(confirm('确定要清空所有参与人吗?')){
 var signFrame = findObj("SignFrame",document);
 var rowscount = signFrame.rows.length;
 //循环删除行,从最后一行往前删除
 for(i=rowscount - 1;i > 0; i--){
  signFrame.deleteRow(i);
 }
 //重置最后行号为1
 var txtTRLastIndex = findObj("txtTRLastIndex",document);
 txtTRLastIndex.value = "1";
 //预添加一行
 AddSignRow();
 }
}
</script>
  <body>
     <div>
 <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
       <tr id="trHeader">
        <td width="27" bgcolor="#96E0E2">序号</td>
        <td width="64" bgcolor="#96E0E2">用户姓名</td>
        <td width="98" bgcolor="#96E0E2">电子邮箱</td>
        <td width="92" bgcolor="#96E0E2">固定电话</td>
        <td width="86" bgcolor="#96E0E2">移动手机</td>
        <td width="153" bgcolor="#96E0E2">公司名称</td>
        <td width="57" align="center" bgcolor="#96E0E2"> </td>
       </tr>
    </table>
  </div>
  <div>
    <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />
   <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
   <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
  </div>
  </body>
</html>

意在本文所述对我们的javascript程序设计有着帮助。

运作效果截图如下:

JavaScript兑现动态的扩充或删除table的行

你大概感兴趣的篇章:

  • Web前端,JavaScript贯彻向OL列表内动态增加LI成分的不二法门
  • JavaScript动态改换HTML页面成分举个例子增加或删除
  • javascript为下拉列表动态增加数据项
  • javascript动态向网页中加上表格完结代码
  • javascript动态增进、修改、删除对象的天性与艺术详解
  • javascript怎样动态加载表格与动态增加表格行
  • JavaScript动态操作表格实例(增加,删除行,列及单元格)
  • Javascript兑现动态菜单增多的实例代码
  • javascript动态增进样式(行内式/嵌入式/外链式等准则)

Web前端 1

<SCRIPT LANGUAGE="JScript"> 
function numberCells() 
{
  var count=0;
  for (i=0; i < document.all.mytable.rows.length; i  )
  {
    for (j=0; j < document.all.mytable.rows(i).cells.length; j  ) 
    {
      document.all.mytable.rows(i).cells(j).innerText = count;
      count  ;
    }
  }
}
function tb_addnew()
{
  var ls_t=document.all("mytable")
  maxcell=ls_t.rows(0).cells.length;
  mynewrow = ls_t.insertRow();
  for(i=0;i<maxcell;i  )
  {
    mynewcell=mynewrow.insertCell();
    mynewcell.innerText="a" i;
  }
}
function tb_delete()
{
  var ls_t=document.all("mytable");
  maxcell=ls_t.rows.length;
  if(maxcell > 1)
  {
    ls_t.deleteRow() ;
  }
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
<input type=button value="Ins Row" onclick="tb_addnew()">
<input type=button value="Del Row" onclick="tb_delete()" >

切实代码如下:

瞩望本文所述对大家的javascript程序设计具备帮衬。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>删除选项</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function RemoveOption(Box,iNum){
 var oForm = document.forms["myForm1"];
 var oBox = oForm.elements[Box];
 oBox.options[iNum] = null; 
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球类:
<p>
<select id="ball" name="ball" multiple="multiple">
 <option value="Football">足球</option>
 <option value="Basketball">篮球</option>
 <option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="删除" onclick="RemoveOption('ball',1);" />
</form>
</body>
</html>

你只怕感兴趣的稿子:

  • JavaScript动态退换HTML页面成分例如增多或删除
  • javascript动态增进、修改、删除对象的习性与办法详解
  • JavaScript动态操作表格实例(增添,删除行,列及单元格)
  • JavaScript 高等篇之DOM文书档案,简单包装及调用、动态增进、删除样式(六)
  • javascript对talbe举行动态拉长、删除、验证完成代码
  • javascript动态增进删减tabs标签的办法

仰望本文所述对我们的javascript程序设计具备匡助。

您或者感兴趣的稿子:

  • javascript动态增加删减tabs标签的法门
  • Javascript动态成立表格及删除行列的不二诀窍
  • javascript动态创造及删除成分的法子
  • JavaScript动态更动HTML页面成分举例添加或删除
  • JavaScript动态操作表格实例(增添,删除行,列及单元格)
  • javascript对talbe举行动态增进、删除、验证完成代码
  • 动态载入/删除/更新外界 JavaScript/Css 文件的代码
  • javascript DOM操作之动态删除TABLE多行
  • 哪些落到实处动态删除javascript函数
  • javascript贯彻动态扩张删除表格行(包容IE/FF)

本文由www.204.net发布,转载请注明来源

关键词: www.204.net