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和＆amp; amp;的性能。 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+"'>";
                    }       
            }
    }

使用javascript在单击时输入文本的纯文本

3 个答案: