Javascript 如何使用jquery在单击动态单元格值时打开对话框_Javascript_Jquery_Html

Javascript 如何使用jquery在单击动态单元格值时打开对话框

javascript jquery html

Javascript 如何使用jquery在单击动态单元格值时打开对话框,javascript,jquery,html,Javascript,Jquery,Html,我有一个HTML表格： <tbody> <tr> <td> <ul id="element"></td> </tr> </tbody> 表中的值是使用jquery从数据库传递的： element += '<li>' + valueOf

我有一个HTML表格：

<tbody>
                    <tr>                
                        <td> <ul id="element"></td>

                    </tr>
</tbody>

表中的值是使用jquery从数据库传递的：

element += '<li>' + valueOfElement.ELEMENTNAME + '</li>'

element+=''+valueOfElement.ELEMENTNAME+''

当用户单击元素名称时，我想在对话框中显示一些与元素名称相关的信息。我不熟悉JavaScript，因此我不知道如何使动态值可单击，以及如何在单击元素时打开对话框。

使用jquery，可以将单击事件绑定到将显示对话框的元素。如果看不到你的对话框或是所有需要的东西，我真的不能包括它，但你可以这样做

$('tbody').on('click','li',function(){
    var value = $(this).text();
    //do something with value and show dialog box
})

使用jquery可以将单击事件绑定到将显示对话框的元素。如果看不到你的对话框或是所有需要的东西，我真的不能包括它，但你可以这样做

$('tbody').on('click','li',function(){
    var value = $(this).text();
    //do something with value and show dialog box
})

可以在图元周围添加锚定标记

element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";

或者，您可以为链接分配一个类

<html>
    <a class='mystyledlink' />
</html>
<style>
    .mystyledlink {
        text-decoration: none;
        color: #000;
    }
</style>


.mystyledlink{
文字装饰：无；
颜色：#000；
}

您可以在元素周围添加锚定标记

element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";

或者，您可以为链接分配一个类

<html>
    <a class='mystyledlink' />
</html>
<style>
    .mystyledlink {
        text-decoration: none;
        color: #000;
    }
</style>


.mystyledlink{
文字装饰：无；
颜色：#000；
}

这种方法采用普通JavaScript。您可以尝试以下方法：使用

addEventListener

来侦听所有可单击单元格上的单击事件。您可以像我一样使用

document.querySelectorAll

访问所有单元格

var tdGroup=document.querySelectorAll（'td'），
我
对于（i=0；i


*{
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
}
html{
字体系列：无衬线；
溢出：隐藏；
}
身体{
显示器：flex；
}
桌子{
保证金：自动；
边界塌陷：塌陷；
位置：相对位置；
顶部：2rem；
}
th{
文本转换：大写；
}
th，
运输署{
填充：1rem；
边框：1px#000实心；
文本对齐：居中；
过渡性质：背景；
过渡时间：1s；
}
td:悬停{
光标：指针；
背景色：#eee；
颜色：#333；
}
td：主动{
背景色：#ddd；
颜色：#444；
过渡时间：0.25s；
}
p{
宽度：100%；
填充：1rem；
文本对齐：居中；
背景色：#000；
颜色：#eee；
位置：绝对位置；
排名：0；
左：0；
}
有关详细信息，请单击表的辅助项
技术领域
语言
资源
相关技术
前端
JavaScript
堆栈溢出
HTML、CSS、SASS
这种方法采用普通JavaScript。您可以尝试以下方法：使用addEventListener
来侦听所有可单击单元格上的单击事件。您可以像我一样使用document.querySelectorAll
访问所有单元格

var tdGroup=document.querySelectorAll（'td'），
我
对于（i=0；i

*{
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
}
html{
字体系列：无衬线；
溢出：隐藏；
}
身体{
显示器：flex；
}
桌子{
保证金：自动；
边界塌陷：塌陷；
位置：相对位置；
顶部：2rem；
}
th{
文本转换：大写；
}
th，
运输署{
填充：1rem；
边框：1px#000实心；
文本对齐：居中；
过渡性质：背景；
过渡时间：1s；
}
td:悬停{
光标：指针；
背景色：#eee；
颜色：#333；
}
td：主动{
背景色：#ddd；
颜色：#444；
过渡时间：0.25s；
}
p{
宽度：100%；
填充：1rem；
文本对齐：居中；
背景色：#000；
颜色：#eee；
位置：绝对位置；
排名：0；
左：0；
}
有关详细信息，请单击表的辅助项
技术领域
语言
资源
相关技术
前端
JavaScript
堆栈溢出
HTML、CSS、SASS
如果有任何其他问题，请在此处提问。如果有任何其他问题，请在此处提问。效果良好。还有一件事。。我不想更改现有格式。在锚定标记本身中有什么属性可以用来实现这一点吗？它工作得很好。还有一件事。。我不想更改现有格式。在锚定标记本身内部是否有任何属性可以用来实现这一点？