2013-04-21 4 views
-5

Я хочу, чтобы текст редактировался, преобразовывая его в текстовое поле. я просто хотел попробовать его в браузере, так что я скопировал его и вставить его в Dreamweaver, но он не работает:Код JavaScript не работает

вы можете найти его здесь: 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> 

Любая помощь, пожалуйста,

+0

даже у меня есть проблемы с синтаксисом .. если у вас есть светлячок вы можете использовать инструмент под названием «поджигатель», который покажет вам JavaScript ошибки, когда они происходят в ошибке консоль. – Silvertiger

+7

Добавили ли вы jquery на свою страницу? –

+0

, пожалуйста, укажите, какая ошибка у него равна –

ответ

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

Код в порядке, мне это сработало. –

+0

Должно быть осторожным с этими двойными косыми чертами. – Oleg

+0

все еще не работает :( – Mercury121

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

Wow Wow wow Спасибо .. его работа – Mercury121

+0

Нет проблем! Вам нужно правильно понять свои основы Не забудьте отметить мой ответ, если он сделает вас счастливым человеком! –

2

Добавить JQuery библиотеки

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