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

我将函数edit（）绑定到属性为'editable'类的标记。然后我的编辑功能：

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

我对如何保存信息并将其传递给Web服务器进行更新感到困惑。我需要id，url和desc来更新Web服务器。因为他们双击一个表条目，这只是给了我该值的元素，但我没有id。我是否将formatData中的两行更改为：

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

这样我可以向网络服务器询问具有该id值的url和desc吗？这似乎是一个糟糕的方式，因为现在两个具有相同的ID，但我不确定，因为我相对较新的AJAX，HTML，Javascript。感谢。

Answer 1

呃，我会按照你的方式提供一些帮助。

基本上，根据我收集的内容，您使用td将函数绑定到每个editable标记。好吧，你可以确定该函数内的id。

B / c您可以选择当前正在编辑的节点的parentNode，然后选择该父节点的firstChild，因此parentNode.firstChild应该是第一个td td }，因为记住每一行tr的每一行都有一个父parentNode.firstChild.firstChild.nodeValue。然后选择该td节点的firstChild，它是它包含的文本节点，然后获取其值id。所以test

这可能不完全符合您的代码，因为您只显示其中的部分内容......但这是该想法的要点。基本上通过DOM选择节点并根据当前上下文拉出正确的节点。

我建议你玩它直到你得到它。

这里有一些示例代码供您考虑，如果您陷入困境。这意味着简短。

基本上，每个中间列都使用onfocus事件上的td函数进行标记（在输入内部单击）。所以这是在输入本身，它拉出parentNode tr，然后是下一个parentNode tr，然后是td的firstChild，它是第一个td然后是第一个孩子第一个input是该行的input，最后是<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>的值属性。

{{1}}

创建可编辑的HTML表格

1 个答案: