Question

我在javascript和dom。我想用下面的代码做的是当我附加一个tr并点击第二个td（姓氏）时，第二个td值将变为粗体。然后当我再次点击第二个td值时，它将恢复正常。我已经完成了大胆的改变，但我不能让它恢复正常。我知道如果我用onclick方法调用detHandler添加一个按钮。但我不允许为此做一个按钮。我需要再次点击该名称才能恢复正常。你们有什么想法吗？

<script type="text/javascript">

  function appendUser()
  {
    var fname=prompt("Please enter your First Name");
    var lname=prompt("Please enter your Last Name");
    var email=prompt("Please enter your Email Address");

    var table=document.getElementById("appendable");

    var tr=document.createElement("tr");
    var td1=document.createElement("td");
    var td2=document.createElement("td");
    td2.id="p1";
    var td3=document.createElement("td");

    td1.innerHTML = fname;
    td2.innerHTML = lname;
    td3.innerHTML = email;

    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.style.color="green";

    table.appendChild(tr);

    addHandler();


  }

  function addHandler ()
  {
    var addH = document.getElementById('p1');

    if (addH.addEventListener) 
    {
      addH.addEventListener('click', applyStyle, false);
    }
    else if (addH.attachEvent) 
    {
      addH.attachEvent('onclick', applyStyle);
    }
  }

  function detHandler ()
  {
    alert("aa");
    var detH = document.getElementById('p1');

    if (detH.removeEventListener)
    {
      detH.removeEventListener('click', applyStyle, false);
      detH.style.color="blue";
      //detH.style.fontWeight="normal";
    }
    else if (detH.detachEvent)
    {
      detH.detachEvent('onclick', applyStyle);
    }
  }

  function applyStyle ()
  {
    var add = document.getElementById('p1');
    add.style.fontWeight="bold";
  }

</script>
</head>
<body>
<table id="appendable" width='50%' border='1'><tr><th>First Name</th><th>Last Name</th>          
 <th>Email Address</th></tr>
     </tr></table>
    <p><button onclick="appendUser()">Append New Row</button></p>
</body>
</html>'

Answer 1

这是这一行：

if (addH.addEventListener)

在W3C模型中，您无法确定是否在元素上注册了事件。

Answer 2

只需在处理程序中切换它

即可

function applyStyle (){
    var add  = document.getElementById('p1');
    var curr = add.style.fontWeight;

    add.style.fontWeight = curr != 'bold' ? 'bold' : 'inherit';
}

FIDDLE

Answer 3

您的代码中有重复的ID（每行都有一个id="pq"的单元格！）

考虑这个解决方案：

function appendUser()
{
  var fname=prompt("Please enter your First Name");
  var lname=prompt("Please enter your Last Name");
  var email=prompt("Please enter your Email Address");

  var table=document.getElementById("appendable");

  var tr=document.createElement("tr");
  var td1=document.createElement("td");
  var td2=document.createElement("td");
  var td3=document.createElement("td");

  td1.appendChild(document.createTextNode(fname));
  td2.appendChild(document.createTextNode(lname));
  td2.setAttribute("data-toggleme","true"); // this is how we identify the cell
  td3.appendChild(document.createTextNode(email));

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.style.color="green";

  table.appendChild(tr);
}
document.getElementById('appendable').onclick = function(e) {
  e = e || window.event;
  var t = e.srcElement || e.target;
  while( t != this && t.nodeName != "TD") t = t.parentNode;
  if( t.getAttribute("data-toggleme")) {
    t.style.fontWeight = t.style.fontWeight == "bold" ? "" : "bold";
  }
}

推迟这样的事件处理程序有两个原因：

更少的活动处理程序！使浏览器更快，而不必跟踪这么多。
您可以添加更多行，并且可以“自动”正确处理

坚持使用addEventListener

3 个答案: