-6

我想通过将文本转换为 textfield 来使其可编辑。我只是想在我的浏览器中尝试它，所以我将它复制并粘贴到 Dreamweaver 中，但它不起作用：

你可以在这里找到它：http: //jsfiddle.net/cnuDh/

但它不工作

代码如下

<label id="edit" style="cursor:pointer; color:blue;">
  edit
</label>
<table>
    <tr>
        <td>First Name:</td>
        <td>John</td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td>Wright</td>
    </tr>
</table>
<script type="text/javascript" charset="utf-8">
$('#edit').click(function () {
    var $table = $('table');
    if ($table.find('input').length) return;
    $table.find('td:nth-child(2)').html(function (i, v) {
        return '<input value=' + v + '>';
    })
})
$('table').on('blur', 'input', function () {
    $('table input').replaceWith(function () {
        return this.value;
    })
})
</script>

请提供任何帮助

4

3 回答 3

2

添加 jQuery 库

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-04-21T10:10:18.093 回答
1

不要忘记将 jQuery 添加到页面中，以便能够使用其选择器以及 $(document).ready()在加载 DOM 和加载页面内容之前加载脚本。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){  
        $('#edit').click(function() {
          var $table = $('table');
          if ($table.find('input').length) return;
          $table.find('td:nth-child(2)').html(function(i, v) {
            return '<input value=' + v + '>';
          })
        })
        $('table').on('blur', 'input', function() {
          $('table input').replaceWith(function() {
            return this.value;
          })
        })
      });
    </script>
  </head>
  <body>
    <label id="edit" style="cursor:pointer; color:blue;">edit</label>
    <table>
      <tr><td>First Name: </td>
          <td>John</td>
      </tr>
      <tr><td>Last Name: </td>
          <td>Wright</td>
      </tr>
    </table>
  </body>
</html>
于 2013-04-21T09:54:38.183 回答
0 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

编辑

<table>
<tr><td>First Name: </td>
    <td>John</td>
</tr>
<tr><td>Last Name: </td>
    <td>Wright</td>
</tr>


$('#edit').click(function() {
   var $table = $('table');
   if ($table.find('input').length) return;
   $table.find('td:nth-child(2)').html(function(i, v) {
     return '<input value=' + v + '>';
  })

  })


$('table').on('blur', 'input', function() {
$('table input').replaceWith(function() {
    return this.value;
})
})
于 2013-04-21T09:47:50.313 回答