纯文本使用javascript在点击时输入文本

Question

我有一个表格，每行都需要编辑按钮，点击纯文本应该成为输入，我已经阅读了很多教程，但我不懂，因为我是 javascript 新手，谁能帮忙？ 这是我开始的：

    <script type="text/javascript">
                function Edit(clickedButton){

    //get row of the clicked button 
    var row = clickedButton.closest('tr'); 
'retrieve each info 
    var tdID = row.cells[0];
    var tdFirstName = row.cells[1];
    var tdLastName = row.cells[2];
    var tdDOB = row.cells[3];
    var tdGender = row.cells[4];
    var tdStatud = row.cells[5];
        </script>

这个在我的桌子上：

<table id="table" class="table .table-bordered" style="width:80%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>DOB</th>
                    <th>Gender</th>
                    <th>Martial Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr id="frow">
                    <td>1</td>
                    <td>Samir</td>
                    <td>Khattar</td>
                    <td>1-12-1990</td>
                    <td>Male</td>
                    <td>Married</td>
                    <td>
                        <button onclick="Edit(this)">Edit</button>
                        <button onclick="Delete(this)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>

.innerhtml 和 .html 有什么区别

Answer 1

首先采用一个表单来获取所需的输入。然后默认隐藏输入区域。并显示当您在表格内显示表格时。如果单击任何按钮，则将显示隐藏的输入区域，并隐藏默认的表格行。这就是这样做的想法。

innserHTML 是一个 javascript DOM 属性。它返回 DOM 的内部 html，也可以用来更改该 dom 的内部 html。另一方面， html() 是一个执行相同工作的 jQuery 库函数。可能是 jQuery 的这种方法实际上使用了 innserHTML 属性。 要了解 innerHTML 和 & html() 的性能，您可以查看此链接：.append VS .html VS .innerHTML performance

祝你好运

Answer 2

只需这样做......它会工作......

 $(function () {
  $("#table td").click(function (e) {
    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();

    $this = $(this);

    if ($this.data('editing')) return;  

    var val = $this.text();

    $this.empty()
    $this.data('editing', true);        

    $('<input type="text" class="editfield">').val(val).appendTo($this);
  });

   putOldValueBack = function () {
    $("#table .editfield").each(function(){
        $this = $(this);
        var val = $this.val();
        var td = $this.closest('td');
        td.empty().html(val).data('editing', false);

    });
   }

   $(document).click(function (e) {
    putOldValueBack();
   });
   });



   //Refer this example

 <table id="table">
<tr>
    <th>RecID</th>
    <th>Col1</th>
    <th>Col2</th>
</tr>
<tr>
    <td>RecID</td>
    <td>Val1.1</td>
    <td>Val1.2</td>
</tr>
<tr>
    <td>RecID</td>
    <td>Val2.1</td>
    <td>Val2.2</td>
   </tr>
   <tr>
    <td>RecID</td>
    <td>Val3.1</td>
    <td>Val3.2</td>
   </tr>
   </table>

Answer 3

试试这个

function Edit(clickedButton){
            var getTR = clickedButton.parentNode.parentNode;
            var getLength = getTR.childElementCount;
            var getTds = getTR.querySelectorAll("td")
            for (i in getTds){
                   if(i < (getLength-1)){
                        getTds[i].innerHTML = "<input type='text' value='"+getTds[i].innerHTML+"'>";
                    }       
            }
    }