Создать редактируемую таблицу HTML

Question

Я пытаюсь следовать примеру профессора создания редактируемой таблицы при двойном щелчке по записи в таблице HTML. Так что мой метод данных выглядит следующим образом:

function formatData(message) { 
    var str = "<table border=1>"; 
    for (var i = 0; i < message.length; i++) { 
     str += "<tr>" + "<td class='editable'>" + message[i].id + "</td>" + 
         "<td>" + message[i].name + "</td>" + 
         "<td class='editable'>" + message[i].url + "</td>" + 
         "<td class='editable'>" + message[i].desc + "</td>" + 
         "<td>" + "<a href='#' onclick='deleteRequest(this); return false' id='" + message[i].id +          "'>delete</a>" + "</td>" + 
         " + "</td>" + "</tr>"; 
    } 
    str += "</table>"; 
    return str; 
} 

Я связываю функцию редактирования() в тегах, чьи атрибуты класса "редактируется. Тогда моя функция редактирования делает:

function edit(elm) { 
    /* check to see if we are already editing */ 
    if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT") 
    return; 

    /* save original content */ 
    var orig = elm.innerHTML; 

    /* create edit field */ 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = elm.innerHTML; 
    input.size = 20; 

    /* convert content to editable */ 
    elm.innerHTML = ''; 
    elm.appendChild(input); 

    /* position cursor and focus */ 
    if (input.selectionStart) 
    input.selectionStart = input.selectionEnd = 0; 
    else 
    { 
    var range = input.createTextRange(); 
    range.move("character", 0); 
    range.select(); 
    } 
    input.focus(); 

    /* set save trigger callback */ 
    input.onblur = function(){save(elm, input,orig);}; 
} 

Я запутался, как я хотел бы сохранить информацию и передать ее на веб-сервер для обновления. Мне нужен идентификатор, url и desc для обновления веб-сервера. Поскольку они дважды нажимают на запись в таблице, это просто дает мне элемент в этом значении, но у меня нет идентификатора. Должен ли я изменить две строки в моих FormatData к:

"<td class='editable' id='" + message[i].id + "'>" + message[i].url + "</td>" + 
"<td class='editable' id='" + message[i].id +"'>" + message[i].desc + "</td>" + 

Так что, как я могу попросить веб-сервер для URL и по алфавиту с этим значением идентификатора? Это похоже на плохой способ сделать это, так как теперь у двух есть один и тот же идентификатор, но я не уверен, так как я относительно новичок в AJAX, HTML, Javascript. Благодарю.

Answer 1

Э-э, я немного помогу вашему пути.

В принципе, из того, что я собираю, вы связываете функцию с каждым тегом td с editable. Ну, вы можете определить id внутри этой функции.

B/C вы можете выбрать parentNode текущего узел редактируются, а затем выберите firstChild этот ParentNode, так parentNode.firstChild, который должен стать первым td, так как помните, в каждой строке каждого из ваших td «s будет иметь один родитель tr. Затем вы выбираете firstChild этого td-узла, который является текстовым узлом, который он содержит, а затем захватывают его значение, id. Итак, parentNode.firstChild.firstChild.nodeValue

Это может не соответствовать точно вашему коду, поскольку вы показываете только его части ... но это суть идеи. В основном выбор узлов через DOM и вытягивание правильного в зависимости от текущего контекста.

Я предлагаю поиграть с ним, пока вы его не получите.

Вот немного примерного кода, о котором вы думаете, если вы застряли. Это должно быть кратким.

В основном, каждый средний столбец отмечен функцией test на событии onfocus (нажатие на вход). Так что это на самом входе, и она тянет ParentNode td, то следующий ParentNode tr, то FirstChild из tr, который является первой td того FirstChild первого td который является input на этой строке, а затем, наконец, что input ' s.

<script> 
function test(elem) { 

    alert(elem.parentNode.parentNode.firstChild.firstChild.value); 
} 
</script> 

<table> 
<tr><td><input value="1"/></td><td><input value="stuff" onfocus="test(this)"/></td><td>other stuff</td></tr> 
<tr><td><input value="2"/></td><td><input value="stuff3" onfocus="test(this)"/></td><td>other stuff</td></tr> 
<tr><td><input value="3"/></td><td><input value="stuff2" onfocus="test(this)"/></td><td>other stuff</td></tr> 
</table>