双击空白添加行与单元格

来源：互联网发布：注册网络域名诈骗编辑：程序博客网时间：2024/05/16 08:08

<span style="background-color: rgb(255, 255, 255);">单击两行之间空白（据上一行底1/3到距下一行顶1/3处），在空白处插入一行。如点击在一行的1/3至2/3处，判断两单元格间距离是否满足添加单元格的条件。</span>

<span style="background-color: rgb(255, 255, 255);">样式：</span>

<span style="font-family: Arial, Helvetica, sans-serif;">table{</span>

    margin: auto;      border: 1px solid black;    width:100% ;    height:100% ;    cellpadding: 0 ;    cellspacing: 0;}tr{    margin: auto;      cellpadding: 0 ;    cellspacing: 0;}td  {    border: 1px solid black;    margin: 0;      }div{    background-color:#cccccc;    padding: 0 ;    margin: 0;     text-align:center;}

页面：

 <div id = "div1">     <table id = "table1" onclick = "addRow(event)" >         <tr>             <td>+</td>             <td>first</td>             <td>check</td>             <td></td>         </tr>         <tr>             <td>+</td>             <td>first</td>             <td>check</td>         </tr>         <tr>             <td>+</td>             <td>first</td>             <td>check</td>         </tr>         <tr>             <td>+</td>             <td>first</td>             <td>check</td>         </tr>     </table></div><div>    <input id = "input1" type="button" value = "TEST" onclick = "getPositionY(event)"/></div>

js:

/**/function addRow(e){    var e_py = getPositionY(e);    var tr  = newTR();    alert("事件位置top： " + e_py);    var only_tr = getTR(e_py);    if(only_tr != null)        $(only_tr).after(tr);    else    {        var td_tr = getTDTR(e_py);        addCell(td_tr,e);    }}/**/function getTR(only_y){    var tableChildren = $('#table1').children();    var strs = $(tableChildren[0]).children();    var tr_height = $(strs[0]).height();    var tr_top;    var tr2_top;    var min_height;    var max_height;    for(i=0;i<strs.length -1 ;i++){/* */        tr_top = $(strs[i]).offset().top;        tr2_top = $(strs[i+1]).offset().top;        min_height = tr_top + 2*tr_height/3;        max_height = tr2_top + tr_height/3;        alert("min_height:" + min_height + " max_height: " + max_height + "only_y: " + only_y);        if(min_height < only_y && max_height > only_y)            break;        else if(i == strs.length -2)           if(only_y > (tr2_top + 2*tr_height/3))           {           }else               return null;    }    alert("当前行：" + i);    return strs[i] ;}function newTR(){    var tr  = document.createElement("tr");        var td3 = document.createElement("td");    td3.innerHTML = "*";    tr.appendChild(td3);    var td2 = document.createElement("td");    td2.innerHTML = "value" ;    tr.appendChild(td2);    var td1 = document.createElement("td");    td1.innerHTML = "name" ;    tr.appendChild(td1);        return tr;}function getPositionY(e) {    var targ ;    if(e){        targ = e.target;    }    var posY = $(targ).offset().top + e.offsetY;    alert("事件绝对坐标：" + posY);    return posY;} function addCell(obj,e){    var e_px = getPositionX(e);    var td  = newTD();    alert("事件位置left： " + e_px);    var only_td = getTD(obj,e_px);    if(only_td != null)        $(only_td).after(td);}function newTD(){    var td3 = document.createElement("td");    td3.innerHTML = "^_^";        return td3}function getTD(only_tr,only_x){    /*获取当前行所有单元格*/    var stds = $(only_tr).children();    var td_width;    var td2_width;    var td_left;    var td2_left;    var min_width;    var max_width;    /*判断单元格间空白 */    for(i=0;i<stds.length -1 ;i++){                td_left = $(stds[i]).offset().left;        td2_left = $(stds[i+1]).offset().left;        td_width = $(stds[i]).width();        td2_width = $(stds[i+i]).width();        min_width = td_left + 2*td_width/3;        max_width = td2_left + td2_width/3;        alert("min_width:" + min_width + " max_width: " + max_width + "only_x: " + only_x);        if(min_width < only_x && max_width > only_x)            break;        else if(i == stds.length -2 )            if(only_x > (td2_left + 2*td2_width/3))            {            }else                return null;    }    alert("当前单元格：" + i);    return stds[i] ;}function getPositionX(e) {    var targ ;    if(e){        targ = e.target;    }    var posX = $(targ).offset().left + e.offsetX;    alert("事件绝对坐标posX：" + posX);    return posX;}function getTDTR(only_y){    var tableChildren = $('#table1').children();    var strs = $(tableChildren[0]).children();    var tr_height = $(strs[0]).height();    var tr_top;    for(i=0;i<strs.length -1 ;i++){/* */        tr_top = $(strs[i]).offset().top;        if(tr_top < only_y && tr_top + tr_height > only_y)            break;    }    alert("当前行：" + i);    return strs[i] ;}

0 0