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属性指定元素的内容是否可编辑。

＆＃13;

$(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");

  });

 }); 
 });

＆＃13;

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

＆＃13;

下一个选项是将td替换为input上的click，并将其反转为span button上的click。这是一个例子。注意：您需要根据您的逻辑进行更新。

＆＃13;

$(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+'">');
  });
  }
 }); 
 });

＆＃13;

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

＆＃13;

Answer 2

编辑选项？

<TD>通常不用于可编辑字段。它是表中用于输出数据的单元格。您可以添加contenteditable属性，该属性适用于过去5年内获得最新浏览器版本的任何人，以便大部分互联网用户，但绝不是全部。

<TD contenteditable="true">

也许你需要一个<input>字段。

如果那不是你的意思，我不明白你的问题。考虑重写它。

如何使用jquery编辑表td值

2 个答案: