এইচটিএমএল টেবিল ঘর সম্পাদনযোগ্য কিভাবে করবেন?

Question 1

আমি এইচটিএমএল টেবিলের কয়েকটি ঘর সম্পাদনযোগ্য করতে চাই, কেবল কোনও ঘরে ডাবল ক্লিক করুন, কিছু পাঠ্য ইনপুট করুন এবং পরিবর্তনগুলি সার্ভারে প্রেরণ করা যেতে পারে। আমি ডোজো ডেটা গ্রিডের মতো কিছু সরঞ্জামকিট ব্যবহার করতে চাই না। কারণ এটি কিছু অন্যান্য বৈশিষ্ট্য সরবরাহ করে। আপনি কি আমাকে কিছু কোড স্নিপেট বা কীভাবে এটি প্রয়োগ করবেন সে সম্পর্কে পরামর্শ সরবরাহ করবেন?

Question 2

আপনি প্রশ্নযুক্ত ঘর, সারি বা সারণিতে সন্তোষজনক বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

আইই 8 সামঞ্জস্যের জন্য আপডেট হয়েছে

<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>

কেবলমাত্র নোট করুন যে আপনি যদি সারণিটি সম্পাদনযোগ্য করে তোলেন তবে মজিলায় কমপক্ষে আপনি সারিগুলি মুছতে পারেন ইত্যাদি

আপনার লক্ষ্য দর্শকের ব্রাউজারগুলি এই গুণটি সমর্থন করেছে কিনা তাও আপনাকে পরীক্ষা করতে হবে check

যতক্ষণ না পরিবর্তনগুলি শুনছেন (যাতে আপনি সার্ভারে প্রেরণ করতে পারেন), সন্তোষজনক পরিবর্তন ইভেন্টগুলি দেখুন

Question 3

এইচটিএমএল 5 বিতর্কিত সমর্থন করে,

<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>.

Question 4

আমার তিনটি পন্থা রয়েছে, এখানে আপনি উভয় <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>। এছাড়াও, ব্যবহারকারীরা ক্রমাগত টাইপ করলে সেই ইভেন্টগুলির সাথে কিছুটা বিলম্ব () ব্যবহার করা ভাল , এজাক্স ইভেন্টটি প্রতিটি কী ব্যবহারকারী প্রেসের সাহায্যে প্রবাহিত হবে না। উদাহরণ স্বরূপ,

$('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 এর মান পরিবর্তন করুন। জাভাস্ক্রিপ্ট সহ এই সব।

Question 5

এটি একটি চলমান উদাহরণ।

$(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>

স্নিপেট প্রসারিত করুন

Question 6

আপনি এক্স-এডিটেবল https://vitalets.github.io/x-edable/ বুটস্ট্র্যাপ থেকে তার দুর্দান্ত লাইব্রেরি ব্যবহার করতে পারেন

Question 7

এই কোড চেষ্টা করুন।

$(function () {
 $("td").dblclick(function () {
    var OriginalContent = $(this).text();

    $(this).addClass("cellEditing");
    $(this).html("<input type="text" value="&quot; + OriginalContent + &quot;" />");
    $(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");
 });
 });
});

আপনি আরও বিস্তারিত জানার জন্য এই লিঙ্কটি দেখতে পারেন:

jQuery এবং সম্পাদনাযোগ্য এইচটিএমএল টেবিল

Question 8

গতিশীলভাবে, সেল ক্লিকে কেবল <input>উপাদানটি প্রবেশ করান <td>। কেবল সাধারণ এইচটিএমএল এবং জাভাস্ক্রিপ্ট। কোন প্রয়োজন নেই জন্য contentEditable, jquery,HTML5

https://Jsfiddle.net/gsivanov/38tLqobw/2/

Question 9

আমি এটি সম্পাদনযোগ্য ক্ষেত্রের জন্য ব্যবহার করছি

<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>

স্নিপেট প্রসারিত করুন

Question 10

আপনি যদি জ্যাকোরি ব্যবহার করেন তবে এই প্লাগইনটি আপনাকে সহজ, তবে ভাল

https://github.com/samuelsantosdev/TableEdit

Question 11

এটি কোডটি নোংরা করার দরকার নেই যদিও এটি প্রয়োজনীয় বিষয়। পরিবর্তে আপনি কেবল সমস্তটির মাধ্যমে পুনরাবৃত্তি করতে পারেন <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>

স্নিপেট প্রসারিত করুন

Question 12

এটি আসলে এত সোজা এগিয়ে, এটি আমার এইচটিএমএল, jQuery নমুনা .. এবং এটি একটি কবজির মতো কাজ করে, আমি একটি অনলাইন জসন ডেটা নমুনা ব্যবহার করে সমস্ত কোড তৈরি করি। চিয়ার্স

<< এইচটিএমএল >>

<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>

Question 13

এটি ক্লিক <input>করা <td>হলে যুক্ত করুন । পরিবর্তন <input>করার জন্য <span>যখন এটি ঝাপসা হয়।