主页 / 问题 / 979640
Accepted
DamirFelix
Asked:2020-05-09 19:33:13 +0000 UTC2020-05-09 19:33:13 +0000 UTC

单击表格行时调用模式窗口[关闭]

  • 772

单击表格行时如何使用 Bootstrap 调用模态窗口？在这种情况下，模式窗口将包含显示在表格相应行中的信息。据我了解，为此您需要确定线路的 ID。

javascript

1 个回答

  1. Best Answer

    无论是 tr 还是 div ......它都可以通过类以某种方式访问​​，如下所示：

    const bubu = document.getElementsByClassName('bubu');
const modal = document.getElementById('modal');
for(let i = 0; i < bubu.length; i++){
  bubu[i].addEventListener('click', function(){
    modal.innerText = this.innerText;
    modal.style.display = 'block';
  });
}

modal.addEventListener('click', function(){
  this.style.display = 'none';
});
    #modal {
  display: none; width: 100vw; height: 100vw;
  position: fixed;
  z-index: 100500; background-color: rgba(0,0,0,0.5);
  text-align: center;
  }

td { padding: 5px 20px; border: 1px solid red; }
    <div id="modal">000</div>

<table>
  <tr class="bubu">
    <td>111</td>
  </tr>
  <tr class="bubu">
    <td>222</td>
  </tr>
</table>

    代码会有所变化，具体取决于您需要填写的内容）

    • 1

相关问题