Die Tabelle ermöglicht das Bearbeiten, Hinzufügen und Löschen von Zeilen durch Doppelklicken

In diesem Artikel werden hauptsächlich die Funktionen zum Bearbeiten, Hinzufügen und Löschen von Zeilen durch Doppelklicken vorgestellt. Interessierte Freunde können darauf verweisen.

html:

<table class="table table-bordered" id="para_table"> 
 <tr> 
  <th style="text-align:center" width="200">名称</th> 
  <th style="text-align:center" width="200">值</th> 
  <th style="text-align:center" width="100">操作</th> 
 </tr> 
 <tr> 
  <td style="text-align:center; " onclick="tdclick(this)"></td> 
  <td style="text-align:center; " onclick="tdclick(this)"></td> 
  <td style="text-align:center; " onclick="deletetr(this)"> 
  <button type="button" class="btn btn-xs btn-link">删除</button> 
  </td> 
 </tr> 
</table> 
 
<p id="addtrp" style="margin-top:-15px; width: 15%; float: right;"> 
 <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button> 
</p>

js:

function save_para_table(){ 
 
 var tableinfo = gettableinfo(); 
 alert(tableinfo); 
 
 
} 
//get table infomation 
function gettableinfo(){ 
 var key = ""; 
 var value = ""; 
 var tabledata = ""; 
 var table = $("#para_table"); 
 var tbody = table.children(); 
 var trs = tbody.children(); 
 for(var i=1;i<trs.length;i++){ 
  var tds = trs.eq(i).children(); 
  for(var j=0;j<tds.length;j++){ 
   if(j==0){ 
    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
     return null; 
    } 
    key = "key\":\""+tds.eq(j).text(); 
   } 
   if(j==1){ 
    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
     return null; 
    } 
    value = "value\":\""+tds.eq(j).text(); 
   } 
  } 
  if(i==trs.length-1){ 
   tabledata += "{\""+key+"\",\""+value+"\"}"; 
  }else{ 
   tabledata += "{\""+key+"\",\""+value+"\"},"; 
  } 
 } 
 tabledata = "["+tabledata+"]"; 
 return tabledata; 
} 
 
function tdclick(tdobject){ 
 var td=$(tdobject); 
 td.attr("onclick", ""); 
 //1,取出当前td中的文本内容保存起来 
 var text=td.text(); 
 //2,清空td里面的内容 
 td.html(""); //也可以用td.empty(); 
 //3，建立一个文本框，也就是input的元素节点 
 var input=$("<input>"); 
 //4，设置文本框的值是保存起来的文本内容 
 input.attr("value",text); 
 input.bind("blur",function(){ 
  var inputnode=$(this); 
  var inputtext=inputnode.val(); 
  var tdNode=inputnode.parent(); 
  tdNode.html(inputtext); 
  tdNode.click(tdclick); 
  td.attr("onclick", "tdclick(this)"); 
 }); 
 input.keyup(function(event){ 
  var myEvent =event||window.event; 
  var kcode=myEvent.keyCode; 
  if(kcode==13){ 
   var inputnode=$(this); 
   var inputtext=inputnode.val(); 
   var tdNode=inputnode.parent(); 
   tdNode.html(inputtext); 
   tdNode.click(tdclick); 
  } 
 }); 
 
 //5，将文本框加入到td中 
 td.append(input); 
 var t =input.val(); 
 input.val("").focus().val(t); 
//    input.focus(); 
 
 //6,清除点击事件 
 td.unbind("click"); 
} 
function addtr(){ 
 var table = $("#para_table"); 
 var tr= $("<tr>" + 
  "<td onclick=&#39;tdclick(this)&#39;>"+"</td>" + 
  "<td onclick=&#39;tdclick(this)&#39;>"+"</td>" + 
  "<td align=&#39;center&#39; onclick=&#39;deletetr(this)&#39;><button type=&#39;button&#39; class=&#39;btn btn-xs btn-link&#39; >"+"删除"+"</button></td></tr>"); 
 table.append(tr); 
} 
function deletetr(tdobject){ 
 var td=$(tdobject); 
 td.parents("tr").remove(); 
}

Verwandte Empfehlungen:

So implementieren Sie die jQuery-Doppelklick-Bearbeitungstabellenfunktion

Das Ereignisattribut ondblclick in HTML, das ausgelöst wird, wenn Die Maus doppelklickt auf ein Element

Verwenden Sie jQuery, um die Doppelklick-Tabellenbearbeitungsfunktion zu implementieren

Das obige ist der detaillierte Inhalt vonDie Tabelle ermöglicht das Bearbeiten, Hinzufügen und Löschen von Zeilen durch Doppelklicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!