2013-08-14 3 views
0

Мой вопрос касается кода, сочетающего функции HTML5 ContentEditable и localStorage.Передача элемента HTML с идентификатором

Вот моя две функции JS, одна для сохранения редактирования пользователя в ячейке таблицы, другая для получения значения и передачи его в ячейку таблицы.

<script type="text/javascript"> 

function storeUserEdit(id) { 
    var pre_value = document.getElementById(id).innerHTML; 
    localStorage.setItem("userEdit",pre_value); 
    } 
function applyUserEdit() { 
    if (localStorage.getItem("userEdit")){ 
    var new_value = localStorage.getItem("userEdit"); 
    } 
    document.getElementById('prjSch_row1_col1').innerHTML = localStorage.getItem("userEdit"); 
} 
</script> 

и вот эти две функции, встроенные в содержание тела:

...

<td id="prjSch_row1_col1" contenteditable="true" onkeyup="storeUserEdit(this.id)" > 
</td> 
<script>applyUserEdit()</script> 

...

Я хочу использовать это для многих ячеек таблицы в моем HTML и как я могу заменить prjSch_row1_col1 на id и передать его функции getUserEdit();

спасибо большое!

ответ

0

Вы пытаетесь сделать что-то вроде this. потому что то, что вы упомянули в вопросе, недостаточно для того, чтобы подумать о ответе. Когда вам нужно запустить функцию applyUserEdit(), на странице load или ...

Пожалуйста, дайте мне знать достаточно деталей.

16/08/2013>

Очень жаль за задержку! Пожалуйста, найдите приведенный ниже код, который я тестировал в Firefox. Это то поведение, которое вы хотите. Пожалуйста, не тестируйте скрипача. Там не работает, я не знаю, почему.

`

<head> 
    <script type="text/javascript"> 
     function storeUserEdit(id) { 
      var pre_value = document.getElementById(id).innerHTML; 
      localStorage.setItem("userEdit",pre_value); 
      localStorage.setItem('userEditControl', id); 
     } 
     function applyUserEdit(id) { 
      var new_value = ''; 
      if (localStorage.getItem("userEdit")){ 
       new_value = localStorage.getItem("userEdit"); 
      } 
      if(localStorage.getItem('userEditControl') === id){ 
       document.getElementById(id).innerHTML = localStorage.getItem("userEdit"); 
      } 
      //this is just to check whether the code is working 
      document.getElementById('log').value = document.getElementById('log').value + '\n' + localStorage.getItem("userEdit"); 
     } 
    </script> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
      <td>User Name:</td> 
      <td id="uname" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td> 
     </tr> 
     <tr> 
      <td>Password:</td> 
      <td id="pword" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td> 
     </tr> 
    </table> 
    <textarea multiline="true" id="log"></textarea> 
</body> 

`

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы ...

+0

спасибо за ваш ответ. то, чего я хочу достичь, отличается от того, что вы указали в ссылке. Я хочу применить отредактированное значение. Я хочу, чтобы applyuseredit() запускался сразу после заполнения каждого поля (ячейки таблицы). Я хочу заменить document.getElementById ('prjSch_row1_col1'). InnerHTML = localStorage.getItem ("userEdit"); с document.getElementById (id) .innerHTML = localStorage.getItem ("userEdit"); но это не сработало. Есть идеи? – user1659995

+0

Привет, Большое спасибо. он приближается к тому, что я хочу. Одна небольшая проблема, когда я заканчиваю свои изменения, мне нужно сохранить копию страницы в виде html-файла. и когда я открываю сохраненную страницу, введенные значения не отображаются ... можете ли вы помочь с этим? – user1659995

Смежные вопросы