Question

我有一个HTML表格：

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

                    </tr>
</tbody>

使用jquery：

从数据库传递表中的值

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

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

Answer 1

使用jquery，您可以将click事件绑定到将显示该对话框的元素。如果没有看到你的对话框或所有内容，我就无法真正包含它，但你可以做这样的事情。

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

Answer 2

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

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>

Answer 3

这种方法属于vanilla JavaScript。您可以尝试这样的事情：利用addEventListener来监听所有可点击单元格上的点击事件。您可以像我一样使用document.querySelectorAll访问所有单元格。

＆＃13;

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 );
}

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: