我用JS写的一段创建TABLE,添加行,模糊匹配,根据CHECKBOX删除内容,创建标题的代码(删除完再添加行有计数器的BUG)

简介:

做错了,贴出来,需要用JQUERY做,现在完全整成DOM和JS做的了

效果图:


代码:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("p").click(function() {
	$(this).hide();
	});


});

   var flag=true
   var tb1 = document.createElement("TABLE")
    
function clearNoNum(obj)
{
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d.]/g,"");
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,"");
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,".");
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}
  
function addTable(){
   
   if(flag!=false)
   {
   flag=false;

   tb1.id="myTable";
   tb1.border="1px";
   var row1 = tb1.insertRow(0); 
   var cell1=row1.insertCell(0);
   var cell2=row1.insertCell(1);
   var cell3=row1.insertCell(2);
   var cell4=row1.insertCell(3);
   var cell5=row1.insertCell(4);
   var cell6=row1.insertCell(5);
   var cell7=row1.insertCell(6);

   document.getElementById("d2").appendChild(tb1);
   cell1.innerHTML="选项";
   cell2.innerHTML="序号";
   cell3.innerHTML="编号";
   cell4.innerHTML="名称";   
   cell5.innerHTML="位置";   
   cell6.innerHTML="数量";
   cell7.innerHTML="单价";
   row1.insertCell(7).innerHTML="价格";
   }
}

function insRow()
  {
  var x=document.getElementById('myTable').insertRow(0)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  y.innerHTML="NEW CELL1"
  z.innerHTML="NEW CELL2"
  }
  
  
function saveTable()
  {
  document.getElementById('myTable').disabled=true;
  }

function editTable()
  {
  document.getElementById('myTable').disabled=false;
  }
  
function createCaption()
  {
  var x=document.getElementById('myTable').createCaption()
  x.innerHTML="我的表格标题"
  }
  

function insertRow() //增加的一行方法
  { 
  newRow=document.all.myTable.insertRow(-1); 
  var j_1 = document.all.myTable.rows.length; 

  newcell=newRow.insertCell(); 
  newcell.innerHTML=""+(j_1-1)+""; 

  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<input type='text' onkeyup='clearNoNum(this)' name='zzkText' />"; 
 
  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<input type='text' onkeyup='clearNoNum(this)' name='zzkText' />"; 

  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<form><select id='mySelect'><option>库存A</option><option>库存B</option><option>库存C</option></select></form>"; 
  
  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<input type='text' name='zzkText"+j_1+"' />"; 

  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<input type='text' name='zzkText"+j_1+"' />"; 

  newcell=newRow.insertCell() ; 
  newcell.innerHTML=""+(j_1-1)+""; 

  newcell=newRow.insertCell() ; 
  newcell.innerHTML="<input type='checkbox' name='mycheck' />"; 
  
  document.all.myTable.focus(); 

} 
  
 function deleteRow()
 {
    var ok=document.getElementsByName("mycheck");
       for(var k=0;k<ok.length;k++)
    {
            if(ok[k].checked==true)
            {
                tb1.deleteRow(k+1);
                k=k-1;
            }
       }
 }
 
 

</script>
</head>
<body>
<p>如果你点击我,我就消失</p>

</br>
<div id="d1">
<input type="button"  value="创建" onclick="addTable()">
<input type="button"  value="添加" onclick="insertRow()">
<input type="button"  value="删除" onclick="deleteRow()">
<input type="button"  value="保存" onclick="saveTable()">
<input type="button"  value="编辑" onclick="editTable()">
<input type="button"  value="复制">
<input type="button"  onclick="createCaption()" value="创建标题">
</div>

<div id="d2">

</div>

<div id="d3">

</div>



</body>
</html>


目录
相关文章
|
15天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
30 0
|
1月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
12 0
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
实用的javascript代码分享
32个史上最有用的js代码
28 1
|
11天前
|
JavaScript
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
14 0
|
29天前
|
JSON 前端开发 JavaScript
16个重要的JavaScript代码
16个重要的JavaScript代码
30 1
|
1月前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
7 0
|
1月前
|
JavaScript
当当网首页——JS代码
当当网首页——JS代码
10 1
|
1月前
|
JavaScript Java
什么?java中居然可以执行js代码了?真是不知者不怪
什么?java中居然可以执行js代码了?真是不知者不怪
13 1
|
1月前
|
JavaScript 前端开发 Python
生成X-Bogus的js代码,通过python调用生成
该文本是一个关于如何解析和执行JavaScript代码的步骤说明。主要内容包括: 1. 找到JavaScript文件的位置。 2. 下载代码并进行格式化。 3. 运行代码时会出现缺少变量错误,需要添加模拟环境的代码。 4. 指出主要的入口函数是`_0x5a8f25`,将其赋值给`window`。 5. 提供了整个JavaScript代码的长串内容。 6. 提供了一个Python脚本,用于调用这个JavaScript函数并处理返回的数据。 总结:这段文本描述了如何处理和运行一个JavaScript文件,以及使用Python来与这个脚本交互的示例。