मैं html तालिका संपादन योग्य कुछ सेल बनाना चाहता हूं, बस एक सेल पर डबल क्लिक करें, कुछ टेक्स्ट इनपुट करें और परिवर्तन सर्वर पर भेजे जा सकते हैं। मैं dojo डेटा ग्रिड जैसे कुछ टूलकिट का उपयोग नहीं करना चाहता। क्योंकि यह कुछ अन्य सुविधाएँ प्रदान करता है। क्या आप मुझे कुछ कोड स्निपेट या सलाह देंगे कि इसे कैसे लागू किया जाए?
जवाबों:
आप विचाराधीन कक्षों, पंक्तियों, या तालिका पर सामग्रीयुक्त विशेषता का उपयोग कर सकते हैं।
IE8 संगतता के लिए अद्यतन किया गया
<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>बस ध्यान दें कि यदि आप टेबल को संपादन योग्य बनाते हैं, तो मोज़िला में कम से कम, आप पंक्तियों को हटा सकते हैं, आदि।
आपको यह भी जांचना होगा कि आपके लक्षित दर्शकों के ब्राउज़रों ने इस विशेषता का समर्थन किया है या नहीं।
जहाँ तक परिवर्तनों के बारे में सुन रहा है (ताकि आप सर्वर को भेज सकें), संतोषप्रद परिवर्तन की घटनाओं को देखें
contenteditableजब भी आप एक नया बनाते हैं, तो आपको div को जोड़ना होगा <td>। अन्यथा, जैसा कि पोस्ट में बताया गया है, आप contenteditableकोशिकाओं, पंक्तियों, या तालिका पर जोड़ सकते हैं ।
HTML5 सामग्री का समर्थन करता है,
<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>संतुष्ट करने के लिए mdn प्रविष्टि को उद्धृत करने के लिए
विशेषता को निम्न में से एक मान लेना चाहिए:
सच या खाली स्ट्रिंग, जो इंगित करता है कि तत्व संपादन योग्य होना चाहिए;
गलत, जो इंगित करता है कि तत्व संपादन योग्य नहीं होना चाहिए।
यदि यह विशेषता सेट नहीं है, तो इसका मूल मान उसके मूल तत्व से विरासत में मिला है।
यह विशेषता एक एन्यूमरेटेड है और बूलियन एक नहीं है। इसका मतलब यह है कि सही, गलत या खाली स्ट्रिंग में से किसी एक का स्पष्ट उपयोग अनिवार्य है और यह एक शॉर्टहैंड ... अनुमति नहीं है।
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.true, यह जो भी नाम है। उदाहरण के लिए, <td contenteditable='contenteditable'></td>।
मेरे पास तीन दृष्टिकोण हैं, यहां आप अपनी आवश्यकताओं के अनुसार <input>या दोनों का उपयोग कर सकते हैं <textarea>।
1. इनपुट का उपयोग करें <td>।
<input>सभी में तत्व का उपयोग करना <td>,
<tr><td><input type="text"></td>....</tr>इसके अलावा, आप इसके आकार के इनपुट का आकार बदलना चाहते हैं td। उदा।,
input { width:100%; height:100%; }जब आप संपादित नहीं कर रहे हैं तो आप इनपुट बॉक्स की सीमा का रंग बदल सकते हैं।
2. contenteditable='true'विशेषता का उपयोग करें । (एचटीएमएल 5)
हालाँकि, यदि आप उपयोग करना चाहते हैं, तो आप contenteditable='true'डेटाबेस के लिए उपयुक्त मानों को सहेजना भी चाह सकते हैं। आप इसे अजाक्स के साथ प्राप्त कर सकते हैं।
आप keyhandlers संलग्न कर सकते हैं keyup, keydown, keypressके लिए आदि <td>। इसके अलावा, उन घटनाओं के साथ कुछ देरी () का उपयोग करना अच्छा होता है जब उपयोगकर्ता लगातार टाइप करते हैं, ajax घटना हर प्रमुख उपयोगकर्ता प्रेस के साथ आग नहीं करेगी। उदाहरण के लिए,
$('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. संलग्न <input>करने के लिए <td>जब यह क्लिक किया जाता है।
में इनपुट तत्व जोड़े tdजब <td>क्लिक किया जाता है, के अनुसार अपने मूल्य को बदलने tdके मूल्य। जब इनपुट धुंधला हो जाता है, तो इनपुट के मान के साथ `td का मान बदलें। यह सब जावास्क्रिप्ट के साथ।
यह एक ज्वलंत उदाहरण है।
$(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-संपादन योग्य https://vitalets.github.io/x-editable/ बूटस्ट्रैप से इसकी भयानक लाइब्रेरी का उपयोग कर सकते हैं
इस कोड को आज़माएं।
$(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");
});
});
});आप अधिक जानकारी के लिए इस लिंक पर भी जा सकते हैं:
सेल क्लिक पर बस डायनामिक रूप से <input>एलिमेंट डालें <td>। केवल सरल HTML और जावास्क्रिप्ट। कोई ज़रूरत नहीं के लिए contentEditable, jquery,HTML5
मैं संपादन योग्य क्षेत्र के लिए इसका उपयोग कर रहा हूं
<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 का उपयोग करते हैं, तो यह प्लगइन सरल है, लेकिन अच्छा है
यह आवश्यक बिंदु है, हालांकि आपको कोड को गन्दा करने की आवश्यकता नहीं है। इसके बजाय आप सभी के माध्यम से पुनरावृति कर सकते हैं <td>और <input>विशेषताओं के साथ जोड़ सकते हैं और अंत में मूल्यों में डाल सकते हैं।
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>यह वास्तव में इतना सीधा आगे है, यह मेरा HTML, jQuery का नमूना है .. और यह एक आकर्षण की तरह काम करता है, मैं एक ऑनलाइन json डेटा नमूने का उपयोग करके सभी कोड का निर्माण करता हूं। चियर्स
<< 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>