如何使用jquery在单击动态单元格值时打开对话框
如何使用jquery在单击动态单元格值时打开对话框
提问于 2017-08-03 00:07:36
我有一个HTML表：
<tbody>
<tr>
<td> <ul id="element"></td>
</tr>
</tbody>表中的值是使用jquery从数据库传来的：
element += '<li>' + valueOfElement.ELEMENTNAME + '</li>'当用户单击元素名称时，我想在对话框中显示一些与元素名称相关的信息。我是JavaScript的新手，所以我不知道如何使动态值可单击，也不知道如何在单击元素时打开对话框。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-08-03 00:15:12
您可以在元素周围添加锚点标记。
element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";要回答您的样式问题，只需添加此CSS规则即可影响所有锚标签
a {
text-decoration: none;
color: #000;
}或者，您可以为您的链接分配一个类
<html>
<a class='mystyledlink' />
</html>
<style>
.mystyledlink {
text-decoration: none;
color: #000;
}
</style>Stack Overflow用户
发布于 2017-08-03 00:12:00
使用jquery，您可以将单击事件绑定到将显示对话框的元素。如果没有看到你的对话框或者所有需要的东西，我不能把它包含进去，但是你可以这样做。
$('tbody').on('click','li',function(){
var value = $(this).text();
//do something with value and show dialog box
})Stack Overflow用户
发布于 2017-08-03 00:41:30
这种方法是在普通的JavaScript中实现的。您可以尝试这样做:利用addEventListener侦听所有可单击单元格上的单击事件。你可以像我一样使用document.querySelectorAll来访问所有的单元。
var tdGroup = document.querySelectorAll( 'td' ),
i;
for( i = 0; i < tdGroup.length; i++ ){
tdGroup[ i ].addEventListener( 'click', messages )
}
function messages(){
alert( 'you clicked' + this.textContent );
}* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
overflow: hidden;
}
body {
display: flex;
}
table {
margin: auto;
border-collapse: collapse;
position: relative;
top: 2rem;
}
th {
text-transform: uppercase;
}
th,
td {
padding: 1rem;
border: 1px #000 solid;
text-align: center;
transition-property: background;
transition-duration: 1s;
}
td:hover {
cursor: pointer;
background-color: #eee;
color: #333;
}
td:active {
background-color: #ddd;
color: #444;
transition-duration: 0.25s;
}
p {
width: 100%;
padding: 1rem;
text-align: center;
background-color: #000;
color: #eee;
position: absolute;
top: 0;
left: 0;
}<p>Click a secondary item of the table for more information</p>
<table>
<tr>
<th>
Technology Field
</th>
<th>
Language
</th>
<th>
Resources
</th>
<th>
Related technologies
</th>
</tr>
<tr>
<td id="front-end">
Front End
</td>
<td id="javaScript">
JavaScript
</td>
<td id="stack">
StackOverflow
</td>
<td id="hcs">
HTML, CSS, SASS
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45465867
复制相关文章
相似问题
腾讯云开发者
