时间戳

首页 > 解决方案 > 如何使用 jQuery 更改 HTML 表格的边框粗细和脉动边框颜色，直到检测到“其他地方”点击？

jquery - 如何使用 jQuery 更改 HTML 表格的边框粗细和脉动边框颜色，直到检测到“其他地方”点击？

问题描述

我有一个 GAS Web 应用程序，其中包含一个带有<tr contenteditable="false" id="pmlist'+ index+'">行标签的表。我想创建一个事件以允许编辑内容并使边框刻度从1px到更改3px并在行的长度内在黑白之间跳动（表示正在编辑该行），然后当用户单击任意位置时在突出显示的行之外，contenteditable设置回false，边框像素设置回1px并且颜色设置回静态白色。

这是我迄今为止所拥有的：

HTML：

       $(document).on("click","tr", function(e){
         e.preventDefault();
         $(e.currentTarget).attr("contenteditable", "true");
//         border: 1px solid black;
//         $('#'+e.currentTarget.id).css("border", "3px solid");

         for (var i = 0; i < 3; i++ ) {
           $('#'+e.currentTarget.id)
            .animate( { backgroundColor: "#f00" }, 2000 ) //I need to change this to border color and thickness
            .animate( { backgroundColor: "transparent" }, 2000 );

         }
   //Then create an event to revert editions to normal : bordercolor: black, 
   //borderthickness: 1px, 
       });

感谢您的帮助，如果无法提供解决方案，我还将感谢相关文档的指示。

标签： jquerygoogle-apps-scripthtml-table

解决方案

你不能不使用插件。

来自http://api.jquery.com/animate/ “所有动画属性都应该被动画化为一个单一的数值，除非下面提到；大多数非数字属性不能使用基本的 jQuery 功能进行动画处理（例如，宽度, height, or left 可以设置动画，但 background-color 不能设置，除非使用了 jQuery.Color 插件）”并且还考虑到“不完全支持简写 CSS 属性（例如字体、背景、边框）。”

您需要一个插件来使边框颜色过渡“$.animate() 方法忽略了边框颜色属性”。例如，试试这个：https: //bitstorm.org/jquery/color-animation/ 2.7kB 缩小。

所以包括插件

脚本 src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"

在 CSS 上定义边框规则

并在 for 循环中制作您想要的 for 属性的动画：

.animate({borderColor: '#f00'}, 2000) .animate({borderWidth: '3px'}, 2000)

推荐阅读