Question

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

但它不起作用

代码在

之下

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

请帮助

Answer 1

添加jQuery库

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

不要忘记将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>

Answer 3

<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;
})
})

JavaScript代码不起作用

3 个答案: