js简单的表格操作
好久没写表格操作全忘了，看别人的看不懂，所以只有自己写个，没有用jquery，觉得直接用jquery写就搞不懂js是咋操作的，除了操作列每个单元格双击之后都能编辑，应该是各个浏览器都兼容吧。
main.html
弹出窗口child.html,本来想用层，可惜技术不行又懒，只能用子窗口了
顺便把源文件发上来，免得以后自己想看都找不到了，最后效果这个样子，搞不懂样式所以很丑
main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript">
//修改tr样式
function changeCkb(myObj){
var myNode=myObj.parentNode.parentNode;
if(myObj.checked){
myNode.style.backgroundColor='#CCFFCC';
}else{
myNode.style.backgroundColor='#f8fbfc';
}
}
//鼠标移动到行改变样式
function mmove(obj){
var colorVal=obj.style.backgroundColor;
if(colorVal!='' && colorVal.charAt(0)!='#'){
colorVal=rgbHex(colorVal);
}
if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
obj.style.backgroundColor='#ecfbd4';
}
}
//鼠标移走改变样式
function mout(obj){
var colorVal=obj.style.backgroundColor;
if(colorVal!='' && colorVal.charAt(0)!='#'){
colorVal=rgbHex(colorVal);
}
if(colorVal.toLowerCase()!='#CCFFCC'.toLowerCase()){
obj.style.backgroundColor='#f8fbfc';
}
}
//把16进制颜色改为rgb颜色
function rgbHex(rgb){
var regexp = /[0-9]{0,3}/g;
var re = rgb.match(regexp);//利用正则表达式去掉多余的部分，将rgb中的数字提取
var hexColor = "#";
var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
for (var i = 0; i < re.length; i++) {
var r = null, c = re[i], l = c;
var hexAr = [];
while (c > 16){
r = c % 16;
c = (c / 16) >> 0;
hexAr.push(hex[r]);
} hexAr.push(hex[c]);
if(l < 16&&l != ""){
hexAr.push(0)
}
hexColor += hexAr.reverse().join('');
}
return hexColor;
}
//选中全部 all unAll
function chkBtn(text){
var chk=document.getElementsByName("ckbdel");
for(var i=0;i<chk.length;i++){
var myNode=chk[i].parentNode.parentNode;
if(text=='all'){
chk[i].checked=true;
myNode.style.backgroundColor='#CCFFCC';
}else if(text=='unAll'){
chk[i].checked=false;
myNode.style.backgroundColor='#f8fbfc';
}
}
}
//移动行数 up down
function chkMove(text){
var chk=document.getElementsByName("ckbdel");
var chkChild;
var num=0;
//获取最后一个勾选的
for(var i=0;i<chk.length;i++){
if(chk[i].checked==true){
chkChild=chk[i];
num++;
}
}
//勾选超过一个
if(num>1){
alert("只能勾选一个");
}else if(num==0){
alert("至少选择一个选项吧");
}else{
if(typeof(chkChild)!='undefined'){
var tdlabel=chkChild.parentNode;
var trlabel=tdlabel.parentNode;
var tbodylabel=trlabel.parentNode;
//删除多余的#text节点
var num=tbodylabel.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(tbodylabel.childNodes[i])!='undefined'){
if(tbodylabel.childNodes[i].nodeType!=1){
tbodylabel.removeChild(tbodylabel.childNodes[i]);
i--;
}
}
}
if(text=='up'){
if(trlabel.previousSibling.id!='tTop'){
tbodylabel.insertBefore(trlabel,trlabel.previousSibling);
}
}else if(text=='down'){
if(trlabel.nextSibling.id!='tBottom'){
tbodylabel.insertBefore(trlabel.nextSibling,trlabel);
}
}
}else{
alert("不能再上移了，再移就上天了");
}
}
}
//把所有数据放入列表框里
function updText(obj){
var valhtml=obj.innerHTML;
if(valhtml.indexOf("<input style=")!=0){
obj.innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='button' value='修改' onclick='_updText(this,\"yes\")' style='height:20px;'/><input type='button' value='取消' onclick='_updText(this,\"no\")' style='height:20px;'/><input type='hidden' value='"+valhtml+"'/>";
for(var i=0;i<obj.childNodes.length;i++){
if(obj.childNodes[i].type=='hidden'){
obj.childNodes[i].value=valhtml;
}
}
}
}
//单行修改 yes为确认修改，no为取消修改，还原数据
function _updText(obj,param){
var pNode=obj.parentNode;
var val="";
var pLength=pNode.childNodes.length;
for(var i=0;i<pLength;i++){
var flag=false;
if(param=='yes'){
flag=(pNode.childNodes[0].type=='text');
}else if(param=='no'){
flag=(pNode.childNodes[0].type=='hidden');
}
if(flag){
val=pNode.childNodes[0].value;
}
pNode.removeChild(pNode.childNodes[0]);
}
pNode.innerHTML=val;
}
//插入一行数据
function insertData(){
var newWin=window.open("child.html",'插入新值',"width=400,height=300,status=yes");
newWin.title="插入新值";
}
//删除选中行
function deleteData(){
var chk=document.getElementsByName("ckbdel");
var chkChild=new Array();
//把勾选的全部获取放入数组
for(var i=0;i<chk.length;i++){
if(chk[i].checked==true){
chkChild.push(chk[i]);
}
}
for(var i=0;i<chkChild.length;i++){
var tdlabel=chkChild[i].parentNode;
var trlabel=tdlabel.parentNode;
var tbodylabel=trlabel.parentNode;
tbodylabel.removeChild(trlabel);
}
}
//添加一行数据
function addRow(arr){
var par=document.getElementById("myRable");
for(var i=0;i<par.childNodes.length;i++){
if(par.childNodes[i].nodeType!=1){
par.removeChild(par.childNodes[i]);
}
}
var tbd=par.childNodes[0];
//删除多余的#text节点
var num=tbd.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(tbd.childNodes[i])!='undefined'){
if(tbd.childNodes[i].nodeType!=1){
tbd.removeChild(tbd.childNodes[i]);
i--;
}
}
}
var new_tr=document.createElement("tr");
new_tr.setAttribute("onmousemove","mmove(this)");
new_tr.setAttribute("onmouseout","mout(this)");
for(var i=0;i<arr.length;i++){
var td=new_tr.insertCell(i);
if(arr[i].type=="text"){
td.setAttribute("ondblclick","updText(this)");
}else if(arr[i].type=="select-one"){
td.setAttribute("ondblclick","updSel(this)");
}
td.innerHTML=arr[i].value;
}
new_tr.insertCell(arr.length).innerHTML="<input type='hidden' value='00"+arr[0].value+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
tbd.insertBefore(new_tr,document.getElementById("tBottom"));
}
var jsonData=[];
jsonData[0]={"id":"1","name":"豆浆","age":"10","state":"很好"};
jsonData[1]={"id":"2","name":"油条","age":"100","state":"很好"};
jsonData[2]={"id":"3","name":"牛奶","age":"1000","state":"很好"};
jsonData[3]={"id":"4","name":"面包","age":"1","state":"很好"};
function downPage(){
var par=document.getElementById("myRable");
//删除那些#text
for(var i=0;i<par.childNodes.length;i++){
if(par.childNodes[i].nodeType!=1){
par.removeChild(par.childNodes[i]);
}
}
//获取tbody
var tbd=par.childNodes[0];
//删除按钮行以前的行，删到标题行就不删了
var tbtn=document.getElementById("tBottom");
var num=0;
while(num==0){
if(tbtn.previousSibling.nodeType!=1 || tbtn.previousSibling.id!='tTop'){
tbd.removeChild(tbtn.previousSibling);
}else{
num=1;
}
}
//添加新的行，想用array又觉得麻烦，懒得改了，纠结
for(var i=0;i<jsonData.length;i++){
var new_tr=document.createElement("tr");
new_tr.setAttribute("onmousemove","mmove(this)");
new_tr.setAttribute("onmouseout","mout(this)");
var td=new_tr.insertCell(0);
td.innerHTML=jsonData[i].id;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(1);
td.innerHTML=jsonData[i].name;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(2);
td.innerHTML=jsonData[i].age;
td.setAttribute("ondblclick","updText(this)");
var td=new_tr.insertCell(3);
td.innerHTML=jsonData[i].state;
td.setAttribute("ondblclick","updSel(this)");
new_tr.insertCell(jsonData.length).innerHTML="<input type='hidden' value='00"+jsonData[i].id+"' /><input type='checkbox' onchange='changeCkb(this)' name='ckbdel'/>";
tbd.insertBefore(new_tr,document.getElementById("tBottom"));
}
}
//------------------------------------------------------------------------------------------------------------------
var selVal=new Array();
var json=[{"name":"很好","value":"很好"},{"name":"不好","value":"不好"},{"name":"好毛线","value":"好毛线"}];
function updSel(obj){
var sel=document.createElement("select");
var text=obj.innerHTML;
var selected=0;
for(var i=0;i<json.length;i++){
var opt=new Option(json[i].name,json[i].value);
//根据text设置option选择项，这里是为了方便显示，只获取值就不用通过这种方法
if(json[i].name==text){
opt.setAttribute("selected","selected")
}
sel.add(opt,null);
}
var nodeHtml="<input type='button' value='修改' onclick='_updSel(this,\"yes\")' style='height:20px;'/>";
nodeHtml+="<input type='button' value='取消' onclick='_updSel(this,\"no\")' style='height:20px;'/>";
nodeHtml+="<input type='hidden' value='"+text+"'/>";
obj.innerHTML="";
obj.appendChild(sel);
obj.innerHTML=obj.innerHTML+nodeHtml;
}
function _updSel(obj,param){
var pNode=obj.parentNode;
var val="";
var pLength=pNode.childNodes.length;
for(var i=0;i<pLength;i++){
var flag=false;
if(param=='yes'){
flag=(pNode.childNodes[0].type=='select-one');
if(flag){
var mysel=pNode.childNodes[0];
for(var j=0;j<mysel.length;j++){
if(mysel[j].value==mysel.value){
val=mysel[j].text;
}
}
}
}else if(param=='no'){
flag=(pNode.childNodes[0].type=='hidden');
if(flag){
val=pNode.childNodes[0].value;
}
}
pNode.removeChild(pNode.childNodes[0]);
}
pNode.innerHTML=val;
}
//获取选中行信息ID，本来想把id放在编号后面，后来想想也麻烦，那样要取当前节点的父节点的父节点的第一个子节点，还不如就丢旁边直接获取当前节点的前一个节点或后一个节点
function getByIds(){
var ids="勾选的编号有:";
var ckbs=document.getElementsByName("ckbdel");
var params=new Array();
//获取所有勾选的节点的父节点的父节点
for(var i=0;i<ckbs.length;i++){
if(ckbs[i].checked==true){
params.push(ckbs[i]);
}
}
if(params.length>0){
for(var i=0;i<params.length;i++){
if(params[i].previousSibling.nodeType!=1){
params[i].parentNode.removeChild(params[i].previousSibling);
}
ids+=params[i].previousSibling.value;
if(i!=(params.length-1)){
ids+="-----";
}
}
alert(ids);
}
}
//编辑当前行
function updAll(objChild){
//获取当前节点的父节点的父节点，及btn》td》tr
var obj=objChild.parentNode.parentNode;
//删除多余的#text节点
var num=obj.childNodes.length;
for(var i=0;i<num;i++){
if(typeof(obj.childNodes[i])!='undefined'){
if(obj.childNodes[i].nodeType!=1){
obj.removeChild(obj.childNodes[i]);
i--;
}
}
}
num=obj.childNodes.length-1;
for(var i=0;i<num;i++){
var valhtml=obj.childNodes[i].innerHTML;
if(valhtml.indexOf("<input style=")!=0){
obj.childNodes[i].innerHTML="<input type='text' value='"+valhtml+"' style='width:60px;height:13px;'/><input type='hidden' value='"+valhtml+"'/>";
}
}
obj.childNodes[num].innerHTML="<input type='button' onclick='updRow(this,\"yes\")' value='修改'><input type='button' onclick='updRow(this,\"no\")' value='取消'>";
}
//修改行，param yes为确认修改，no为取消修改
function updRow(obj,param){
var pNode=obj.parentNode.parentNode;
var num=pNode.childNodes.length-1;
for(var i=0;i<num;i++){
var val="";
var tdNode=pNode.childNodes[i];
var pLength=tdNode.childNodes.length;
for(var j=0;j<pLength;j++){
var flag=false;
if(param=='yes'){
flag=(tdNode.childNodes[0].type=='text');
}else if(param=='no'){
flag=(tdNode.childNodes[0].type=='hidden');
}
if(flag){
val=tdNode.childNodes[0].value;
}
tdNode.removeChild(tdNode.childNodes[0]);
}
tdNode.innerHTML=val;
}
pNode.childNodes[num].innerHTML="<input type='button' value='编辑' onclick='updAll(this)'>";
}
</script>
</head>
<body>
<table id="myRable" border="1" style="background-color: #f8fbfc;color: #000000;width: 800px;">
<tr id="tTop" onmousemove="mmove(this);" onmouseout="mout(this);">
<td width="100">编号</td>
<td width="100">姓名</td>
<td width="200">年龄</td>
<td width="200">状态</td>
<td width="200">操作</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>3</td>
<td ondblclick='updText(this)'>张三</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="003" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>4</td>
<td ondblclick='updText(this)'>李四</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="004" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>5</td>
<td ondblclick='updText(this)'>王五</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="005" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>6</td>
<td ondblclick='updText(this)'>赵六</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="006" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr onmousemove="mmove(this);" onmouseout="mout(this);">
<td ondblclick='updText(this)'>7</td>
<td ondblclick='updText(this)'>杨七</td>
<td ondblclick="updText(this)">100</td>
<td ondblclick='updSel(this)'>很好</td>
<td><input type="hidden" value="007" />
<input type="checkbox" onchange="changeCkb(this)" name="ckbdel"/>
</td>
</tr>
<tr id="tBottom">
<td colspan="5" align="right">
<input type="button" onclick="getByIds()" value="获取勾选项编号"/>
<input type="button" onclick="insertData()" value="插入"/>
<input type="button" onclick="deleteData()" value="删除"/>
<input type="button" onclick="chkMove('up')" value="上移"/>
<input type="button" onclick="chkMove('down')" value="下移"/>
<input type="button" onclick="chkBtn('all')" value="全选"/>
<input type="button" onclick="chkBtn('unAll')" value="反选"/>
</td>
</tr>
<tr>
<td colspan="5" align="right">
<a href="javascript:void(0)" onclick="downPage()">下一页</a>
</td>
</tr>
<tr>
<td>8</td>
<td>周八</td>
<td>100</td>
<td>很好</td>
<td><input type="button" value="编辑" onclick="updAll(this)"></td>
</tr>
</table>
</body>
</html>
弹出窗口child.html,本来想用层，可惜技术不行又懒，只能用子窗口了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>插入新值</title>
<script type="text/javascript">
function addData(){
var id=document.getElementById("id");
var name=document.getElementById("name");
var age=document.getElementById("age");
var state=document.getElementById("state");
var json=[];
json[0]={"type":id.type,"value":id.value};
json[1]={"type":name.type,"value":name.value};
json[2]={"type":age.type,"value":age.value};
json[3]={"type":state.type,"value":state.value};
if(window.opener){
alert(json);
window.opener.addRow(json);
}
window.close();
}
</script>
</head>
<body>
<table>
<table border="1">
<tr>
<td>编号</td>
<td><input id="id"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input id="name"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input id="age"/></td>
</tr>
<tr>
<td>状态</td>
<td>
<select id="state">
<option value="很好">很好</option>
<option value="很不好">很不好</option>
<option value="好毛线">好毛线</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="插入一行" onclick="addData()"/> </td>
</tr>
</table>
</table>
</body>
</html>
顺便把源文件发上来，免得以后自己想看都找不到了，最后效果这个样子，搞不懂样式所以很丑