javascript - 坚持使用 addEventListener-6ren

javascript - 坚持使用 addEventListener

转载作者：行者123 更新时间：2023-11-28 08:21:34

25

4

我正在研究 javascript 和 dom。我想要对下面的代码执行的操作是，当我附加 tr 并单击第二个 td(姓氏)时，第二个 td 值将更改为粗体。然后当我再次单击第二个 td 值时，它将恢复正常。我已经将其更改为粗体，但我无法使其恢复正常。我知道如果我添加一个带有调用 detHandler 的 onclick 方法的按钮。但我不允许为此制作按钮。我需要再次单击该名称才能恢复正常。你们有什么想法吗？

<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>'

最佳答案

只需在处理程序中切换它即可

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

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

FIDDLE

关于javascript - 坚持使用 addEventListener，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22895319/

25

4

0

文章推荐： javascript - Bootbox.js 对话框正在被剪切

文章推荐： JavaScript 动画速度

文章推荐： javascript - Canvas.toDataUrl 有时在 Chrome/Firefox 中被 chop

java - 坚持@Transient
在我的 POJO 中，我有这个: @Transient private int qtyMentee; 在我的 DAO 中我有这个查询: public List findQtyMentee(){
iphone - 坚持 CoreLocation
如果我正在编写的应用程序终止，我需要将当前位置存储到 iphone 的“磁盘”中。然后，当应用程序再次启动时，我想恢复这些信息。但是，CLLocation 坐标属性是只读的。如何在程序调用之间保存此
c++ - 坚持 twitcurl
这个问题有点来回，因为我已经了解了一些关于 unix 系统的 g++ 知识(抱歉，如果我把任何人搞砸了)。对于我目前正在尝试完成的项目，我想获得 twitcurl使用 Xcode 和 OpenFra
php - 坚持 Eloquent 查询和子查询
我想在表格中显示用户的姓名以及本周发布的照片数量。示例:用户 1 发布了 10 张照片，用户 2 发布了 20 张照片...... 所以我需要一个计数，但我不知道如何。图片型号: public
JPA 坚持 OneToMany ManyToOne
我正在尝试保留具有@OneToMany 和@ManyToOne 关系的实体。 @OneToMany(mappedBy="customer", cascade=CascadeType.ALL, fetc
php - 坚持 laravel 插入
我有一个表单，我从另一个表中获取字段，例如，第一个字段是硬编码的，第二个字段是从另一个表中获取的，如果其他表有 10 条记录，则向用户显示 10 个新字段。我的问题是如何将这种数据插入表中。我得到这
javascript - 坚持 import/export
我一直在努力控制导入和导出，这样我就可以精简我的 JS 应用程序。我试过合并这些 Mozilla和 this Stack Overflow examples没有任何运气。 It looks like
c# - 坚持 C# 正则表达式
我的数据库中的一个字段中包含以下文本: [quote:5a7b87febe="mr smith"]This is some text. This is more text on another lin
java - 坚持 UPnP 不返回操作
我正在使用 cling UPnP android 中的框架连接到支持 UPnP 的设备。我成功地创建了一个设备并浏览了网络中的可用设备。但对于三星电视在网络框架内没有任何反应。在这里我添加了 Rend
sql - 坚持 SQL 连接查询
我正在制作一个问答网站，类似于此网站和 Yahoo answers。我有 3 个表 - smf_members、qa_questions 和 qa_answers。在此查询中，我想从 qa_ques
javascript - 坚持 JavaScript 日期标准格式吗？
阅读后this question - 它还提供了文档链接，我仍然对文档有疑问。 MDN:Date.parse A string representing an RFC2822 or ISO 8601
java - 坚持 GAE 后将子实体添加到父实体
我有一个父实体客户端。该客户可以访问该网站并创建约会。这意味着约会是在客户反对的其他时间创建的。我的问题是:如何将子对象添加到已持久化的父对象中？如果调用下面示例中的函数 addData1()，则会
javascript - 坚持 Jquery 动画无限循环
我正在尝试创建气泡，重复几次后我的浏览器卡住了。这是我的代码。有人请帮助....我如何在不提出许多请求的情况下完成它。看起来我的帖子主要是代码，但我为这个 Stackoverflow 添加了足够的细
c# - 坚持 linq 查询
我被这个 linq 查询困住了，我需要做的就是优化最后的价格计算，因为我得到了大约 1000 篇文章，而且销量很大，所以它变得很慢...... var result = from article in
mysql - 坚持 Doctrine2 时如何跳过专栏？
我有一列用于对象创建的时间，一列用于对象更新的时间。当我创建并保留新对象时，我从 MySQL 收到错误: updated cannot be null. 我没有为它设置任何值，因为我希望 upda
git - 坚持 push ，没有任何反应
我以前使用 git 没有任何问题，但突然间我无法推送或克隆任何东西。当我使用这个命令时，没有任何反应，甚至没有错误，所以我必须按 ctrl + c 或关闭 git 窗口。我使用这个简单的命令来推
go - 坚持 Go 并发
我似乎不知道下一步该做什么。我的目标是使用图像包中的 SubImage 函数从原始图像创建一个包含所有子图像的数组。我能够在 imageSplit() 函数中分割图像并通过 channel 传递给 i
stm32l152 - 坚持 STM32L-Discovery 的基本编程
我有一个 STM32L-Discovery 板，它有一个 STM32L152R8 微处理器。我很难让基本的事情发挥作用。我看过ST给出的例子(电流消耗触摸传感器和温度传感器)，我认为它们不太用户友好
mysql - 坚持 ruby 和 mysql
这是一个散列，其中mysql列与散列的键相关，值与散列的值相关 {:jobID=>"1", :checkoutArtificateFolder=>"/cmf/new/build/Artifacts/
java - JPA:防止级联操作[坚持，删除...]
我有两个实体 @Entity @Table(name="parent") public class Parent { @Id String uuid; @ElementCollection

首页

博学

6Ren·AI

商城

javascript - 坚持使用 addEventListener