Bazı html tablo hücrelerini düzenlenebilir yapmak istiyorum, sadece bir hücreye çift tıklayın, bir metin girin ve değişiklikler sunucuya gönderilebilir. Dojo veri ızgarası gibi bazı araç takımlarını kullanmak istemiyorum. Çünkü başka özellikler de sağlıyor. Bana biraz kod parçacığı veya onu nasıl uygulayacağıma dair tavsiyeler verir misiniz?
Yanıtlar:
İçerik düzenlenebilir özniteliği söz konusu hücrelerde, satırlarda veya tabloda kullanabilirsiniz.
IE8 uyumluluğu için güncellendi
<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>Tabloyu düzenlenebilir yaparsanız, en azından Mozilla'da satırları vb. Silebilirsiniz.
Ayrıca, hedef kitlenizin tarayıcılarının bu özelliği destekleyip desteklemediğini de kontrol etmeniz gerekir.
Değişiklikleri dinlerken (böylece sunucuya gönderebilirsiniz), memnun edici değişiklik etkinliklerine bakın
contenteditableher yeni oluşturduğunuzda div'i eklemeniz yeterlidir <td>. Aksi takdirde, gönderide belirtildiği gibi contenteditablehücrelere, satırlara veya tabloya ekleyebilirsiniz .
HTML5, içerik düzenlenebilirliği destekler,
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>Memnuniyetle ilgili MDN girişinden alıntı yapmak için
Özellik, aşağıdaki değerlerden birini almalıdır:
true veya boş dize; öğenin düzenlenebilir olması gerektiğini belirtir;
false, öğenin düzenlenebilir olmaması gerektiğini belirtir.
Bu özellik ayarlanmazsa, varsayılan değeri üst öğesinden miras alınır.
Bu öznitelik numaralandırılmış bir özniteliktir ve Boole özniteliği değildir. Bu, true, false veya boş dize değerlerinden birinin açık kullanımının zorunlu olduğu ve bir steno ... kullanımına izin verilmediği anlamına gelir.
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.true, adı ne olursa olsun. Örneğin <td contenteditable='contenteditable'></td>,.
Üç yaklaşımım var, Burada ikisini de kullanabilirsiniz <input>veya<textarea> gereksinimlerinize göre kullanabilirsiniz.
1. Giriş'i kullanın <td> .
Tüm s’lerde <input>element kullanmak <td>,
<tr><td><input type="text"></td>....</tr>Ayrıca girişi kendi boyutuna göre yeniden boyutlandırmak isteyebilirsiniz td. ör.,
input { width:100%; height:100%; }Ayrıca, düzenlenmediğinde giriş kutusunun kenarlığının rengini de değiştirebilirsiniz.
2. Kullanın contenteditable='true' Özniteliği . (HTML5)
Ancak kullanmak istiyorsanız contenteditable='true' istiyorsanız, uygun değerleri veritabanına da kaydetmek isteyebilirsiniz. Bunu ajax ile başarabilirsiniz.
Sen keyhandlers ekleyebilir keyup, keydown, keypressvb <td>. Ayrıca, kullanıcı sürekli olarak yazı yazarken bu olaylarda biraz delay () kullanmak iyidir , ajax olayı her tuşa basıldığında tetiklenmez. Örneğin,
$('table td').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(saveData, 500); // delay after user types
$(this).data('timer', wait);
});
function saveData() {
// ... ajax ...
}3. Ekleme <input>için <td>tıklandığında.
Giriş elemanı ekleme tdsırasında <td>tıklandığında uygun değerini değiştirmek tdbireyin değeri. Giriş bulanık olduğunda, "td değerini giriş değeriyle değiştirin. Bütün bunlar javascript ile.
contenteditable=true, bu konuda bana yardımcı olabilir misiniz lütfen?
Bu çalıştırılabilir bir örnektir.
$(function(){
$("td").click(function(event){
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
var inputObj = $("<input type='text' />");
tdObj.html("");
inputObj.width(tdObj.width())
.height(tdObj.height())
.css({border:"0px",fontSize:"17px"})
.val(preText)
.appendTo(tdObj)
.trigger("focus")
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which) { // press ENTER-key
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which) { // press ESC-key
tdObj.html(preText);
}
});
inputObj.click(function(){
return false;
});
});
});<html>
<head>
<!-- jQuery source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table align="center">
<tr> <td>id</td> <td>name</td> </tr>
<tr> <td>001</td> <td>dog</td> </tr>
<tr> <td>002</td> <td>cat</td> </tr>
<tr> <td>003</td> <td>pig</td> </tr>
</table>
</body>
</html>X-editable https://vitalets.github.io/x-editable/ harika kitaplığını bootstrap'tan kullanabilirsiniz.
Bu kodu deneyin.
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type="text" value="" + OriginalContent + "" />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});Daha fazla ayrıntı için bu bağlantıyı da ziyaret edebilirsiniz:
Sadece hücre tıklandığında dinamik olarak <input>öğe ekleyin <td>. Yalnızca basit HTML ve Javascript. Gerek için contentEditable, jquery,HTML5
Bunu düzenlenebilir alan için kullanıyorum
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Citation</th>
<th class="text-center">Security</th>
<th class="text-center">Implementation</th>
<th class="text-center">Description</th>
<th class="text-center">Solution</th>
<th class="text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false">30</td>
<td class="pt-3-half" contenteditable="false">Deepends</td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
</td>
</tr>
</tbody>
</table>Jquery kullanıyorsanız, bu eklenti size yardımcı olur, ancak iyidir
Kodu bu kadar karmaşık hale getirmenize gerek olmasa da temel nokta budur. Bunun yerine, tüm öğeleri yineleyebilir <td>ve <input>özniteliklerle birlikte ekleyebilir ve sonunda değerleri girebilirsiniz .
function edit(el) {
el.childNodes[0].removeAttribute("disabled");
el.childNodes[0].focus();
window.getSelection().removeAllRanges();
}
function disable(el) {
el.setAttribute("disabled","");
}<table border>
<tr>
<td ondblclick="edit(this)"><input value="cell1" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell2" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell3" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="so forth..." disabled onblur="disable(this)">
</td>
</tr>
</table>bu aslında çok basit, bu benim HTML, jQuery örneğim .. ve bir cazibe gibi çalışıyor, tüm kodu çevrimiçi bir json veri örneği kullanarak oluşturuyorum. şerefe
<< HTML >>
<table id="myTable"></table><< jQuery >>
<script>
var url = 'http://jsonplaceholder.typicode.com/posts';
var currentEditedIndex = -1;
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
tr = $('<tr/>');
tr.append("<td>ID</td>");
tr.append("<td>userId</td>");
tr.append("<td>title</td>");
tr.append("<td>body</td>");
tr.append("<td>edit</td>");
$('#myTable').append(tr);
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].id + "</td>");
tr.append("<td>" + json[i].userId + "</td>");
tr.append("<td>" + json[i].title + "</td>");
tr.append("<td>" + json[i].body + "</td>");
tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>");
$('#myTable').append(tr);
}
});
});
function myfunc(rowindex) {
rowindex++;
console.log(currentEditedIndex)
if (currentEditedIndex != -1) { //not first time to click
cancelClick(rowindex)
}
else {
cancelClick(currentEditedIndex)
}
currentEditedIndex = rowindex; //update the global variable to current edit location
//get cells values
var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text());
var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text());
var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text());
var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text());
//remove text from previous click
//add a cancel button
$("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200");
//make it a text box
$("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />");
}
//on cancel, remove the controls and remove the cancel btn
function cancelClick(indx)
{
//console.log('edit is at row>> rowindex:' + currentEditedIndex);
indx = currentEditedIndex;
var cell1 = ($("#myTable #mycustomid").val());
var cell2 = ($("#myTable #mycustomuserId").val());
var cell3 = ($("#myTable #mycustomtitle").val());
var cell4 = ($("#myTable #mycustomedit").val());
$("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1);
$("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2);
$("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3);
$("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4);
$("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove();
}
</script>