Javascript 如何在表列中添加“多读或少读”按钮

下面是实现这一目标的最佳方法是什么

假设我的前端表如下所示：

id  | usernname | role url
 1  | JHON      | /welcome... readmore

id  | usernname | role url
 1  | JHON      | /welcome ,/addnew ,/product, /purchase

在初始加载时，它应该只显示一个url，但当用户单击read more时，角色url会显示如下所示的所有数据：

id  | usernname | role url
 1  | JHON      | /welcome... readmore

id  | usernname | role url
 1  | JHON      | /welcome ,/addnew ,/product, /purchase

---

有什么好办法可以做到这一点吗注意此角色url可以包含更多url，即动态增加。

下面的示例显示了如何将单击事件添加到url单元格中的范围。然后在父单元格中切换一个类，该类根据当前状态显示/隐藏URL。这依赖于加载两个跨距，一个包含压缩URL，另一个包含所有URL

我添加了一些样式来帮助用户理解交互

备选方案-不必加载两个span（需要添加/欢迎两次），只需使用class

.long

和额外的URL即可创建一个span。这在第2行用用户名b.date演示

更新：添加了一个启动超时的按钮，以动态显示添加的URL，如果您添加了URL，则应将类添加到父级

td

，以便它知道它有多个URL，这将允许您显示“显示更多/更少”链接。它使用我添加的唯一行

id

添加它

如果这不是你想要的，请告诉我

//使用类toggle more向每个元素添加click事件
//这是动态的，因此将用于任何新的“显示更多”
$（“#用户列表”）。在（'单击'，'上。切换更多'，函数（）{
//在最近的父表单元格中切换“更多”类
$（this）.toggleClass（“更多”）；
//更改链接的文本
如果（$（this.text（）=“显示更多”）{
$（此）.text（“显示较少”）；
}否则{
$（此）.text（“显示更多”）；
}
});
//单击事件开始添加URL
$（“#添加URL”）。单击（函数（）{
addURL（）；
$（this.remove（）；
});
//添加新的URL
函数addURL（）{
//添加新URL时，您必须选择实际使用中的适当行，即用唯一的行标识符替换#user-1
$（“#user-1.url list.toggle more”）。在（“，/newURL”）之前；
//在表格单元格中添加一个类，这样我们就知道有多个URL，同样需要用唯一的行标识符替换#user-1。
$（“#user-1.url列表”）.addClass（“多url”）；
//继续添加URL
var addURLtimer=setTimeout（addURL，3000）；
}

td.long{
显示：无；
}
更多，长{
显示：继承；
}
td.更多，简短{
显示：无；
}
.url、.切换更多{
浮动：左；
}
.url{
左侧填充：4px；
}
.切换更多{
显示：无；
左侧填充：4px；
颜色：蓝色；
文字装饰：下划线；
光标：指针；
}
.multi-url。切换更多{
显示：继承；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
表，th，td{
边框：1px纯黑；
}
th，td{
填充：4px；
文本对齐：左对齐；
}

身份证件
用户名
角色url
0
j、 史密斯
/欢迎光临
/欢迎，/addnew，/product，/purchase展示更多信息
1.
b、 时代
/欢迎光临
显示更多
开始添加URL

下面的示例显示了如何将单击事件添加到URL单元格中的范围。然后在父单元格中切换一个类，该类根据当前状态显示/隐藏URL。这依赖于加载两个跨距，一个包含压缩URL，另一个包含所有URL

我添加了一些样式来帮助用户理解交互

备选方案-不必加载两个span（需要添加/欢迎两次），只需使用class

.long

和额外的URL即可创建一个span。这在第2行用用户名b.date演示

更新：添加了一个启动超时的按钮，以动态显示添加的URL，如果您添加了URL，则应将类添加到父级

td

，以便它知道它有多个URL，这将允许您显示“显示更多/更少”链接。它使用我添加的唯一行

id

添加它

如果这不是你想要的，请告诉我

//使用类toggle more向每个元素添加click事件
//这是动态的，因此将用于任何新的“显示更多”
$（“#用户列表”）。在（'单击'，'上。切换更多'，函数（）{
//在最近的父表单元格中切换“更多”类
$（this）.toggleClass（“更多”）；
//更改链接的文本
如果（$（this.text（）=“显示更多”）{
$（此）.text（“显示较少”）；
}否则{
$（此）.text（“显示更多”）；
}
});
//单击事件开始添加URL
$（“#添加URL”）。单击（函数（）{
addURL（）；
$（this.remove（）；
});
//添加新的URL
函数addURL（）{
//添加新URL时，您必须选择实际使用中的适当行，即用唯一的行标识符替换#user-1
$（“#user-1.url list.toggle more”）。在（“，/newURL”）之前；
//在表格单元格中添加一个类，这样我们就知道有多个URL，同样需要用唯一的行标识符替换#user-1。
$（“#user-1.url列表”）.addClass（“多url”）；
//继续添加URL
var addURLtimer=setTimeout（addURL，3000）；
}

td.long{
显示：无；
}
更多，长{
显示：继承；
}
td.更多，简短{
显示：无；
}
.url、.切换更多{
浮动：左；
}
.url{
左侧填充：4px；
}
.切换更多{
显示：无；
左侧填充：4px；
颜色：蓝色；
文字装饰：下划线；
光标：指针；
}
.multi-url。切换更多{
显示：继承；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
表，th，td{
边框：1px纯黑；
}
th，td{
填充：4px；
文本对齐：左对齐；
}

身份证件
用户名
角色url
0
j、 史密斯
/欢迎光临
/欢迎，/addnew，/product，/purchase展示更多信息
1.