怎么实现在一个多行多列的表格中移除某一个单元格之后，后面的单元格自动补上去

首先每个单元格都有唯一的ID （不是单元格顺序但肯定唯一）比如这样aaa | bbb | ccc
111 | 222 | 333这个表格现在我要删除ccc这个单元格，然后我想让表格变成aaa | bbb | 111
222 | 333 |最后一个格子就没有了请问如何用js实现这类似的功能（例如点击某个单元格则删除他），恩我用的jquery库

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1.你没说怎么删除，怎样才能找到删除的单元格
2.个人感觉操作单元格用jquery没用，
3。分有点少，没动力
不是删除某个单元格把，真删除了某个格子，table不就不完整了~~应该是将该单元格后面的所有单元格内容前移，最后一个单元格内容为空
没动力！不过送你一段代码参考！
var trs = grid.rows.length;
        var tds = grid.rows.item(0).cells.length;
        //fixed Columnt Width
        var fcw=grid.rows[0].childNodes[0].offsetWidth;
        //左侧固定列
        var fixedCol=document.createElement("div");
        fixedCol.id="fixedCol";
        fixedCol.style.cssText="float:left;left:"+gl+"px;width:"+parseInt(fcw)+"px;height:"+parseInt(gh-100)+"px;overflow-x:auto;overflow-y:hidden";
        var fixedTable= document.createElement("Table");
        fixedTable.id="fixedTable";
        fixedTable.style.cssText="position:relative;height:"+gl+"px;border:0px;border-style:solid;border-color : #232332;border-collapse :collapse;border-spacing:0px;cellpadding:0px ;cellspacing:0px; ";
        for(var i=0;i<trs;i++)
        {
            var row = fixedTable.insertRow();
            if(i==0)
                row.style.cssText="position:relative;background:#234;";
            var cell = row.insertCell();
            var cell2 = row.insertCell();
            cell.innerText=grid.rows[i].cells[0].innerText;
            cell.style.cssText="border:1px;border-style:solid;border-color : #232332;border-collapse :collapse;border-spacing:0px;";
        }
        fixedCol.appendChild(fixedTable);
其实就是利用循环重置CELL的文本的过程
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META http-equiv="Content-Style-Type" content="text/css">    </head>
    <script language=javascript>
        function deltb(val){
            var ret=[];
            var tb=document.getElementById("tb");
            var trlen=tb.rows.length;
            var tdlen=tb.rows[0].cells.length
            for(var i=0;i<trlen;i++){
                for(var j=0;j<tdlen;j++){
                    if(tb.rows[i].cells[j].innerText!=val){
                        ret.push(tb.rows[i].cells[j].innerText)
                    }
                }
            }
            ret[ret.length]=" ";
            var k=0;
            for(var i=0;i<trlen;i++){
                for(var j=0;j<tdlen;j++){
                    tb.rows[i].cells[j].innerText=ret[k++]
                }
            }        }
    </script>
    <body >
        <table id="tb" border=1px gray>
            <tr><td>aaa</td><td>bbb</td><td id="ccc">ccc</td></tr>
            <tr><td>111</td><td>222</td><td>333</td></tr>
        </table>
        <input type="button" onclick='deltb("ccc")' value="删除ccc">
    </body>
</html>
用 ul、li 实现容易些，td 移动太消耗性能了L@_@K
<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
ul
{
width: 150px;
display: block;
border: solid 0px red;
overflow: visible;
}
li
{
display: inline;
border-left: solid 1px black;
cursor: hand;
}
  </style>
</head> <body>
<h4>点击删除！</h4>
  <ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>111</li>
<li>222</li>
<li>333</li>
  </ul>
</body>
<script type="text/javascript">

</script>
</html>
给你个一行三列的添加和删除的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD> <BODY>
  <table id="secTable" border="1"></table>
  <input type="button" value="add" onclick="addData()" />
   <input type="button" value="delete" onclick="arrayTimeTr(1)" />
</BODY>
</HTML>
<script>
var i=0;
function addData(){
var tableObj = document.getElementById('secTable');
var R = null;
//得到最后一行的列数如果最后一行的列数等于三插入一行否则在原先的行上增加
var rowObj = tableObj.rows[0];if(rowObj==null||rowObj=='undefined'){
R = tableObj.insertRow();
}else{
var cellObj = tableObj.rows[tableObj.rows.length-1].cells;
if(cellObj==null||cellObj=='undefined'){
R = tableObj.insertRow();
}else{
var cellNum = cellObj.length;
if(cellNum==3){
R = tableObj.insertRow();
}else{
R = tableObj.rows[tableObj.rows.length-1];
}
}
} C = R.insertCell();
C.colSpan=3;
C.width=150;
    C.innerHTML ="<a onmouseover=\"this.style.color='blue';this.style.cursor='hand'\" onmouseout=\"this.style.color=''\" >it is me"+(++i)+"</a>";
    C.className='sec1';
  }
  //删除时重新排列一行三列
function arrayTimeTr(temp){
var timeHeaderObj = document.getElementById('secTable');
//删除第一行第一列的值可以设置其他的删除
if(timeHeaderObj.rows[0]!=null){
timeHeaderObj.rows[0].deleteCell(temp);
}
//保存过后重新排列
var cellArray = new Array();
var rowObj = document.getElementById('secTable').rows;
if(rowObj!=null&&rowObj!='undefined'){
for(var i=0;i<rowObj.length;i++){
var cellsObj = rowObj[i].cells;
//将某列的信息赋值给数组
for(var j=0;j<cellsObj.length;j++){
var trObj = {};
trObj.classNameT=cellsObj[j].className;
trObj.idT = cellsObj[j].id;
trObj.htmlT=cellsObj[j].innerHTML;
cellArray.push(trObj);
}
  }
}
//删除行
if(rowObj!=null&&rowObj!='undefined'){
var rowNumT = rowObj.length;
for(var n=0;n<rowNumT;n++){
timeHeaderObj.deleteRow(n);
rowNumT=rowNumT-1;
             n=n-1;
}
}
  //重新排列数据
  for(var m=0;m<cellArray.length;m++){
   var trObj = cellArray[m];
   var R = null;
//得到最后一行的列数如果最后一行的列数等于三插入一行否则在原先的行上增加
if(m%3==0){
R = timeHeaderObj.insertRow();
}else{
R = timeHeaderObj.rows[m/3];
}
C = R.insertCell();
C.width=150;
C.colSpan=3
  C.innerHTML = trObj['htmlT'];
  C.className=trObj['classNameT'];
  C.id=trObj['idT'];
   }
}
</script>