JS操作表格的问题50分+50分

无选中的时候，增加在最后一行
有选中的时候，增加在选中行的下一行
有多行选中的时候，以最后一个算
add:function(){ //添加1个tr
var self=this;
var selectedRow = -1;
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) selectedRow=tr.rowIndex+1;})
var tr = self.tbl.insertRow(selectedRow),td1= tr.insertCell(-1),td2= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML="A： <INPUT NAME=A /> <br />B： <INPUT NAME=B />";
}

谢谢“lihui_shine”
“鼠标拖动行上下移动”可行否？

如果想要有拖动功能，table应该不行了吧！要用div

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2132" />
<title>公用样式测试页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<link rel="stylesheet" type="text/css" media="all" href="calendar/calendar-blue.css"  />
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="calendar/calendar-cn-utf8.js"></script>
<script type="text/javascript" src="calendar/calendar-setup.js"></script><script language="javascript" src="javascript/powerTableEdit.js" charset="GBK"></script>
<script language="javascript" src="javascript/sortTable.js"></script>
<script language="javascript">
function initTable()
{
    pt = new PowerTableEdit("table1");
    var arrText = new Array();
    arrText[0] = "成品";
    arrText[1] = "半成品";
    arrText[2] = "原料";

    var arrValue = new Array();
    arrValue[0] = "1";
    arrValue[1] = "2";
    arrValue[2] = "3";


    pt.setCol(2,'txt-but');
    pt.setCol(3,'sel',arrText,arrValue);
    pt.setCol(4,'txt');
    pt.setCol(5,'num-int');
    pt.setCol(6,'date');
    pt.setCol(7,'num-float');
}function add()
{
    var arrDa = new Array();
    arrDa[0] = " ";
    arrDa[1] = " ";
    arrDa[2] = " ";
    arrDa[3] = " ";
    arrDa[4] = " ";
    arrDa[5] = " ";
    arrDa[6] = " ";
    arrDa[7] = " ";
    pt.setCellData(arrDa);
    add_row(mainTab);
}
</script><body onLoad="initTable()">

<div class="explain">
<ul>
<li><img src="images/ico_explain.gif" alt="图标" width="11" height="15" /> 当前位置：标准样式参考 > 数据表格页面</li>
</ul>
</div>

<div class="header">
    <span class="leftcorner"></span>
  <h3 class="caption">搜索</h3>
    <span class="rightcorner"></span>
</div>


<table width="95%" border="0" align="center" cellpadding="0"  cellspacing="1" class="tableBule">
    <tr>
      <td width="20%" class="alignRight">信息标题：</td>
      <td width="80%" class="alignLeft"><input name="textfield5" type="text" class="input" />
      </td>
    </tr>
    <tr>
      <td class="alignRight">发布人：</td>
      <td class="alignLeft"><input name="textfield5" type="text" class="input" /></td>
    </tr>
</table>
<div class="operation">
  <input name="search" type="button" class="buttonBlue" value="搜索" />  
  <input name="reset" type="reset" class="buttonBlue" id="reseat" value="重置" />
</div>
<div class="operationtop">
<input name="Submit2" type="button" class="buttonMore" value="添加项目" />
<input name="Submit2" type="button" class="buttonMore" value="提交"  onClick="document.all.alldata.value = getAllData()"/>
<input name="alldata" type="text" class="input" /></div>

<div class="header">
    <span class="leftcorner"></span>
  <h3 class="caption">项目列表</h3>
    <span class="rightcorner"></span>
</div>


<table id=table1 width="95%" border="0" cellspacing="1" cellpadding="0" class="tableBule" >
<thead><tr align=middle>
    <td class="thstyle"> </th>
    <td class="thstyle">序号</th>
    <td class="thstyle" onclick=sortColumn(event)>货物名称</th>
    <td class="thstyle" onclick=sortColumn(event)>货物类型</th>
    <td class="thstyle">条码</th>
    <td class="thstyle">件数</th>
    <td class="thstyle" onclick=sortColumn(event) type="Date">生产日期</th>
    <td class="thstyle" onclick=sortColumn(event) type="Number">价格</th>
  </tr></thead>
  <tr>
    <td> </td>
    <td>1</td>
    <td>钢材</td>
    <td data="1">原料</td>
    <td>12345678</td>
    <td>10</td>
    <td>2008-09-10</td>
    <td>10000</td>
  </tr>


</table>

<div class="page"><span class="floatLeft">记录总数：5 总页数：1 当前页：1</span><span class="floatRight">首页上一页 <a href="#">下一页</a> 末页    转到
  <input name="textfield" type="text" class="inputGo" size="3" maxlength="3" />
页
<input type="button" name="Submit" value="确定"  class="buttonGo"/>
</span></div>
<div class="operation">
<input onclick=add() type=button value=添加一行 class="buttonMore">
<input onClick="del_row(mainTab);" type=button value=删除一行 class="buttonMore">
<input id=moveUp onclick=Move_up(mainTab) type=button value=上移一行 class="buttonMore">
<input id=moveDown onclick=Move_down(mainTab) type=button value=下移一行 class="buttonMore">    
<input id=colNum size=2> <input type=button value='取列数据' onClick="alert(getColData(document.all.colNum.value))" class="buttonMore"/>  
<input id=rowNum size=2> <input type=button value='取行数据' onClick="alert(getRowData(document.all.rowNum.value))" class="buttonMore"/>

</div>
</body>
</html>

js文件部分-1var mainTab = null;
var currentRowIndex = null;
var currentCell = null;
var orgContent = "";
//标记是否能编辑
var editbleFlag = true;var showColume = false;//选中行默认颜色
var currentBgc  = "#E9F3FF";
//选中行字体颜色
var currentFontColor = "#1B79D7";//用来保存下拉菜单中的option项
var optionText = "";
//图片列号
var imagePos = 0;
//保存每一列的编辑类型
var colStyle = new Array();
//保存下拉框中的text和value
var sText = new Array();
var sValue = new Array();
//增加是各个单元格的数据
var cellData = new Array();
/**
* 建立PowerTableEdit类，该类实现表格的自由编辑，删除，增加，上下移动
* 其中自由编辑可以指定编辑方式及哪一列需要编辑
* 使用时，只需要利用表格的id创建PowerTableEdit对象
*/
function PowerTableEdit(tableId)
{
    //当前选中行
    currentRowIndex = null;
    //当前编辑cell
    currentCell = null;    mainTab = document.all(tableId);
    //获取已定义的颜色
    readDef(mainTab);    mainTab.onclick = clickIt;
    //mainTab.ondblclick    = dblclickIt;

    //设置select下拉框的数据
    this.setCol = setColStyle;
    this.setEditable = setEditable;
    this.setCellData = setCellData;
    this.getColData = getColData;
    this.getRowData = getRowData;
    //原始表格，可以支持reset
    orgContent = mainTab.outerHTML;    //初始化增加表格的数据
    for(var i=0; i < mainTab.rows[0].cells.length; i++)
        cellData[i] = " ";
    setEvenOddColor(mainTab);
}//为select的onchange事件指定动作
function selectChangeAction()
{
    var cellNum = currentCell.cellIndex;
    var valueOfSel = document.all.powerTableSel.value;
    //给单元格的data赋值
    event.srcElement.parentNode.data = event.srcElement.value;

    //动作代理
    selectProxy(cellNum,valueOfSel);
}
function selectProxy(cellNum, valueOfSel)
{}function ClickAction()
{
var WinReturn = showModalDialog("importdetail.html","","dialogHeight=600px;dialogWidth=800px;");

alert(currentRowIndex);

if( WinReturn != null )
for( i = 0; i < WinReturn.length; i++)
{
mainTab.rows[currentRowIndex].cells[i+1].innerText = WinReturn[i];
}

}//获取指定列的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容，
//如果是下拉框编辑方式，则返回其value值，即td中的data值
//colIndex为列号，isImg为是否为图片
function getColData(colIndex,isImg)
{
    if(colIndex == "")
        return null;
    var colNum = colIndex == null ? 0 : colIndex;
    //如果为指定此参数，则默认为false，即不是图片格式数据
    var isImgCol = isImg == null ? false : isImg;
    var arrCelData = new Array();
    if(/\D/g.test(colNum)
        || colNum >= mainTab.rows[0].cells.length
         || colNum < 0)
        return null;
    if(isImgCol)
    {
        for(var i=1; i<mainTab.rows.length; i++)
        {
            if(mainTab.rows[i].cells[0].children[0]
                && mainTab.rows[i].cells[0].children[0].tagName.toLowerCase() == "img")
                arrCelData[i-1] = mainTab.rows[i].cells[0].data;
            else
                arrCelData[i-1] = null;
        }
    }
    else
    {
        if(colStyle[parseInt(colNum)] == "txt")
        {
            for(var i=1; i<mainTab.rows.length; i++)
            {
                if(mainTab.rows[i].cells[colNum].children.length>0)
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].children[0].value;
                else
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;
            }
        }
        else if(colStyle[parseInt(colNum)] == "sel")
        {
            for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].data;
        }
        else
        {
                for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;
        }
    }
    return arrCelData;
}//获取指定行的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容，
//如果是下拉框编辑方式，则返回其value值，即td中的data值
//rowIndex为列号，isImg为是否为图片，如果是图片，则返回图片的id
function getRowData(rowIndex)
{
    var arrRowData = new Array();
    var rowNum = rowIndex == null ? 1 : rowIndex;
    if(/\D/g.test(rowNum)
        || rowNum >= mainTab.rows.length
         || rowNum <= 0)
        return null;
    for(var i=0; i<mainTab.rows[rowIndex].cells.length; i++)
    {
        with(mainTab.rows[rowIndex].cells[i])
        {

            if(children.length > 0)
            {
                if(children[0].tagName.toLowerCase() == "img")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "select")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "input")
                    arrRowData[i] = children[0].value;
                else
                    arrRowData[i] = innerText;
            }
            else
            {
                if(colStyle[i] == "sel")
                    arrRowData[i] = data;
                else
                    arrRowData[i] = innerText;
            }
        }
    }
    return arrRowData;
}//如果是input或textarea,则允许选中里面的文字
document.onselectstart = function()
                         {
                             var oObj = event.srcElement;
                             if(oObj.tagName.toLowerCase() != "input"
                                && oObj.tagName.toLowerCase()!= "textarea")
                                return false;
                         } /**
*  获取所有表格的值
*/
function getAllData()
{
var TabData="";
var x;    var arrRowData = new Array();
    if(mainTab.rows.length<1)
        return null;

  for(x=1; x<mainTab.rows.length; x++){
    var arr_str="";
    for(var i=0; i<mainTab.rows[x].cells.length; i++)
    {        with(mainTab.rows[x].cells[i])
        {
            if(children.length > 0)
            {
                if(children[0].tagName.toLowerCase() == "img")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "select")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "input")
                    arrRowData[i] = children[0].value;
                else
                    arrRowData[i] = innerText;
            }
            else
            {
                if(colStyle[i] == "sel")
                    arrRowData[i] = data;
                else
                    arrRowData[i] = innerText;
            }
        }
    }
if (x==1){
arr_str=arrRowData;
}
else{
arr_str="|" + arrRowData;
}
TabData += arr_str;

  }

//    alert(TabData);
    return TabData;
}

js文件部分-2
/**
*  设置编辑方式
*  colNum 为列编号
*  colSty为编辑类型，分为：txt－文本框编辑； sel－下拉框编辑
*  sDa 当编辑方式是下拉框方式时，传入下拉框中的数据数组
*/
function setColStyle(colNum,colSty,sTxt,sVal)
{
    colStyle[parseInt(colNum)] = colSty;
    sText[parseInt(colNum)] = sTxt == null ? "" : sTxt;
    sValue[parseInt(colNum)] = sVal == null ? "" : sVal;
}//在表格的指定位置插入标记图标，其中，
//oImg是用来插入的图标对象，
//rIndex，是没个图标的id，如果一列中要采用不同的标志，该值不可相同
//nCell,为设置的图标的列，默认为第一列
function insertImg(oImg,rIndex,nCell)
{
    if(nCell == null)
        nCell = 0;
    else
        imagePos = nCell;    var sHtml = "<img id=imgIndex_"+rIndex+" src='"+oImg.src+"' width=16 height=16/>";

    if(!currentRowIndex)
    {
        alert("请选中要设置图片的行！");
        return;
    }

    //检测所选行已经存在标志时的情况
    if(mainTab.rows[currentRowIndex].cells[nCell].children[0])
    {
        if(mainTab.rows[currentRowIndex].cells[nCell].children[0].id != "imgIndex_"+rIndex)
            alert("此位置已经存在其它的标志！");
        else
            return;
    }
    else
    {
        //遍历整个表格，把原始标志还原
        for(var i=0; i<mainTab.rows.length; i++)
        {
            with(mainTab.rows[i].cells[nCell])
            {
                if(children[0] && children[0].id == 'imgIndex_'+rIndex && i!= currentRowIndex)
                {
                    innerHTML = " ";
                    data = null;
                }
            }
        }
        //置新标志
        mainTab.rows[currentRowIndex].cells[nCell].innerHTML = sHtml;
        mainTab.rows[currentRowIndex].cells[nCell].data = rIndex;
    }
}//设置是否需要编辑的标记，如果设为true，则表格能编辑，反之不能，默认为可以编辑
function setEditable(editFlag)
{
    if(editFlag == null)
        editbleFlag == true;
    else
        editbleFlag = editFlag;
}//设置增加时各个单元格的数据
function setCellData(arrData)
{
    //如果没有设置数据，则插入各个单元格所在的列数
    if(arrData == null)
    {
        for(var i=0; i<mainTab.rows[0].cells.length; i++)
            cellData[i] = i;
    }
    else
    {
        if(arrData.length >= arrData.length)
        {
            for(var i=0; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = arrData[i];
        }
        //数据不足，补以列号
        if(arrData.length < mainTab.rows[0].cells.length)
        {
            for(var i=0; i<arrData.length; i++)
                cellData[i] = arrData[i];
            for(var i= arrData.length; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = i;
        }
    }
}function result_dataset(rowno,cellarr,arr1){
if (rowno == null && rewno<1 && cellarr == null && arr1 == null)
return;

var j=cellarr.length;
var x;

var y=1;
var str=arr1[0];

for (var n=1;n<mainTab.rows.length;n++){
if (mainTab.rows[n].cells[1].innerHTML == str){
  y=y+1;
}
} if (y > 1)
return;

with(mainTab.rows[rowno]){
for (var i=0;i<j;i++){
x=cellarr[i]
cells[x].innerText = arr1[i];
}
}
}
function result_dataset_cust(rowno,cell_no,str){
if (rowno == null && rewno<1 && cell_no == null && str == null)
return;

with(mainTab.rows[rowno]){
cells[cell_no].innerText = str;
}

}
function clearColor()
{
    objTable=mainTab;
    if (currentCell != null)
        if (currentCell.children.length>0)
    {
        if(currentCell.children[0].tagName.toLowerCase() == "input")
            currentCell.innerText=currentCell.children[0].value;
        else if(currentCell.children[0].tagName.toLowerCase() == "select")
            currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
    }
    ClearColor(objTable,currentRowIndex,currentCell);
}function document.onclick()
{    clearColor();
    currentRowIndex  = null;
    currentCell = null;

}function readDef(objTable)
{
    ReadOrgColor(objTable);
}function clickIt()
{
    event.cancelBubble=true;
    var currentObject = event.srcElement;
    var i = 0 ,j = 0;


    //原编辑项变为表格
    if(currentCell!=null && currentRowIndex !=0
        && currentObject.type!="select-one"
            && currentObject.type!="text")
    if (currentCell.children.length>0 )
    {
        if(currentCell.children[0].tagName.toLowerCase() != "img"
             && currentCell.children[0].tagName.toLowerCase() != "a")
        {
            if(currentCell.children[0].tagName.toLowerCase() == "input")
                currentCell.innerText=currentCell.children[0].value;
            else if(currentCell.children[0].tagName.toLowerCase() == "select")
                currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
        }
    }
    if(currentObject.tagName.toLowerCase() != "table"
        && currentObject.tagName.toLowerCase() != "tbody"
           && currentObject.tagName.toLowerCase() != "tr"
           && currentObject.tagName.toLowerCase() != "input"
            && currentObject.tagName.toLowerCase() != "img")
    {
        var currentTd   = getElement(currentObject,"td");
        if(currentTd==null) return;


        if (currentTd.children.length<=0
            || currentTd.children[0].tagName.toLowerCase() == "a"
             || currentTd.children[0].tagName.toLowerCase() == "img")

        {
            var currentTr   = currentTd.parentElement;
            var objTable = getElement(currentTd,"table");
            var i = 0;
            clearColor();
            currentRowIndex = currentTr.rowIndex;
            //设置选中的行
            if(currentRowIndex!=0)
            {
                for(i=0;i<currentTr.cells.length;i++)
                {
                    with(currentTr.cells[i])
                    {
                        style.backgroundColor=currentBgc;
                        style.color=currentFontColor;
                    }
                }
            }
        }

        //根据标记设置是否可编辑
        if(editbleFlag)
        {
            currentCell= currentTd;

            /*根据不同的设置进行编辑选择*/
            if(currentCell.children.length!=1 && currentCell.parentNode.rowIndex != 0)
            {
                var cellN = currentCell.cellIndex;
                if(colStyle[parseInt(cellN)] == 'txt')
                    editCell(mainTab,currentCell,'txt',true);
                else if(colStyle[parseInt(cellN)] == 'sel')
                    editCell(mainTab,currentCell,'sel',true,sText[parseInt(cellN)],sValue[parseInt(cellN)]);
                else if(colStyle[parseInt(cellN)] == 'txt-but')
                 editCell(mainTab,currentCell,'txt-but',true);
                else if(colStyle[parseInt(cellN)] == 'date')
                 editCell(mainTab,currentCell,'date',true);
                else if(colStyle[parseInt(cellN)] == 'num-int')
                 editCell(mainTab,currentCell,'num-int',true);
                else if(colStyle[parseInt(cellN)] == 'num-float')
                 editCell(mainTab,currentCell,'num-float',true);

                if(currentCell.children.length > 0)
                {
                    if(currentCell.children[0].type == "select-one")
                        currentCell.children[0].focus();
                    else
                        currentCell.children[0].select();
                }
            }
        }
    }    selectRowProxy(currentRowIndex);
}

这样写js代码太乱,建议用jQuery,实现你需要的功能用不了多少代码就可以实现

调试易

JS操作表格的问题50分+50分

解决方案 »