javascript - 如何使用jquery编辑表td值

Question

我想编辑 td 值，并且部分完成了，但它无法正常工作。请帮助我。这是我的 jsfiddle 片段: https://jsfiddle.net/rKF8a/34/

注意:不需要 contenteditable="true"选项，因为 IE 不支持。

HTML:

<table id="elencoMezzi" width="100%">
    <thead>
        <tr><th>Field 1</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr>   
         <tr>
            <td><span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
         <tr>
            <td><span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
         <tr>
            <td><span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton"/>Save</button></span></td> 
        </tr> 
    </tbody>
</table>

Js:

$(function(){
    $("#elencoMezzi tr").click(function() {
        $(this).find('td').find('span:eq(1)').css('display','block');
        $(this).find('td').find('span:eq(1)').find('button').click(function() {  
            $(this).text("Saved");

  setTimeout(function(){ 
   $(this).parent('span').css('display','none');

  }, 500);
        });
    });
});

Answer 1

使用contenteditable="true"编辑内容。contenteditable属性指定元素的内容是否可编辑。

$(function () {

  $("#elencoMezzi tr").click(function() {  

  $(this).find('td').find('span:eq(1)').css('display','block');


  $(this).find('td').find('span:eq(1)').find('button').click(function() {  

  $(this).text("Saved");

  });

 }); 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
    <th>
        Field 1
    </th>

</tr>
</thead>
<tbody>
<tr>
    <td contenteditable="true">
    <span>Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr>   
 <tr>
    <td contenteditable="true">
    <span>Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td contenteditable="true"> 
    <span>Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td contenteditable="true">
    <span>Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
</tbody>

下一个选项是在click上将td替换为input，并将其反转为按钮上的span 点击。这是一个例子。注意:您需要按照您的逻辑进行更新。

$(function () {


  $("#elencoMezzi tr").each(function() {  
edittd();
  $(this).find('td').find('span:eq(1)').css('display','block');


  $(this).find('td').find('.closed').find('button').on('click',function() {  
var value = $(this).parent().prev('input').val();
   $(this).parent().prev('input').replaceWith('<span class="value">' + value+ '</span>');
  $(this).text("Saved");
  edittd();
  });
  function edittd(){
   $("td").find('.value').on('click', function(){
   var value = $(this).text();
   $(this).replaceWith('<input type="text" value="'+value+'">');
  });
  }
 }); 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="elencoMezzi" width="100%">
<thead>
<tr>
    <th>
        Field 1
    </th>

</tr>
</thead>
<tbody>
<tr>
    <td>
    <span class="value">Value 1.1</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr>   
 <tr>
    <td>
    <span class="value">Value 1.2</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td> 
    <span class="value">Value 1.3</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
 <tr>
    <td>
    <span class="value">Value 1.4</span><span class="floatright closed"><button type="button" value="save" class="saveButton">Save</button></span>
    </td> 
</tr> 
</tbody>