双击空白添加行

来源：互联网发布：web后端性能优化编辑：程序博客网时间：2024/05/21 09:01

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">双击表某两行之间空白，自动在空白位置插入新的一行</span>

表样例：

<div id = "div1">     <table id = "table1" ondblclick = "addRow(event)" >         <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>         <tr>             <td>+</td>             <td>first</td>             <td>check</td>         </tr>     </table></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)        $(getTR(e_py)).after(tr);}/*根据事件y绝对坐标判断获取tr*/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;}/*获取事件的绝对y坐标*/function getPositionY(e) {    var targ ;    if(e){        targ = e.target;    }    var posY = $(targ).offset().top + e.offsetY;    alert("事件绝对坐标：" + posY);    return posY;}

样式：

table{    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;}

0 0