您现在的位置是:首页 > 教程资讯 > 编程开发

实现超级用户体验表排序的javascript实现代码

2021-11-25 17:30:18【编程开发】人查看

简介 实现超用户体验 table排序javascript实现代码

以前在网上看这样的JS效果:

编辑时点击:(抱歉,图片在文章后面)。列表和编辑器在同一个页面上的效果真的很好,可以给用户带来意想不到的精彩体验。但是它是怎么发生的呢?其实有很多方法可以达到这种效果。当然,如果你的JS不好,可以用JQuery的组件,但是我觉得自己能写出来总是好的。所以我花了一些时间才意识到。当我意识到的时候,发现实现这个效果非常简单,做了几行JS代码。关键是思考的问题。下面我会详细写如何实现。General IDea:给TR一个id来显示和隐藏以达到这个效果。首先要意识到这个关键的桥梁是“ID”,因为你想显示和隐藏一个tr,唯一能区分它们的就是它们的ID号。当然我们还是用循环输出的形式“TR Style=' Color3360 # 0033 FFdisplay:none'id='?PHP echo $ value[' uuid '];'"。然后我们可以通过他们在JS代码中的ID号来识别他们。但关键问题又来了。我们如何得到这个ID值?可能有些朋友跟我一样想到了隐藏域,我一开始也想到了,但是那也没有什么好处,因为当你用JS在隐藏域中获取值的时候,它的ID是死的,所以每次只能获取第一个tr的ID号,其他的就不行了。那怎么办?哈哈。别担心。人总是有办法的。我们还有“这个”。这个关键词真的是个好东西。有了它,“我们不怕天空”.所以,我们写“a href=' #' onclick=' display(这个。id)' id='?PHP echo $ value[' uuid '];/m ' .这样我们就很容易得到了类似tr的ID号(注:为什么说和我后面要说的差不多)?可能细心的朋友看到了我的代码,有一个“/m”。写这个的原因是应该和trID分开,否则不会得到值(ID是唯一的)。这样,如果tr的ID号是“1223”,那么我的“onclick”事件的值就是“1223/m”,我们是用JS的字符串分段法得到与TR相同的ID号。" var va array=va . split('/');var id=va array[0];" .好吧。既然我们有了所有的身份证号码,我们不能做什么?嘿嘿。让我们在下面展示一下。”document . getelementbyid(id). style . display=' block ';“好的.超过.下面是一些关键代码:JS如下:复制代码如下://显示函数display(va){ var va array=va . split('/');var id=va array[0];document . getelementbyid(id). style . display=' block ';var parID=id ' pdocument . getelementbyid(ParId). style . display=' none ';//这里是一个tr}的隐藏部分html部分如下:复制代码如下: tr bgcolor=' # d3d ce 3 ' style=' color 3360 # 0033 ff;display:none'id='?PHP echo $ value[' uuid '];'th=' 13% ' modify input type=' button ' name=' input ' value=' save '/input type=' button ' name=' input ' value=' cancel ' onclick=' backs(this . id)' id='?PHP echo $ value[' uuid '];/n/th/th宽度='11% '输入名称='text '类型='text '值='?PHP echo $ value[' username '];'//第th宽度='15% '输入名称='text '类型='text '值='?PHP echo $ value[' create time '];'//第th宽度='8% '输入类型='text '名称='Input '值='?PHP echo $ value[' uuid '];'//th a href=' # ' onclick=' display(this . id)' id='?PHP echo $ value[' uuid '];/m' show!-这里是触发器JS - /a /th /tr。另一种解释:1我发布的时候上面的代码可能是错的。如果无法实现,请联系我。以上只是我的学习记录,可能不专业。如果有错误,欢迎指出,我一定会改进。