jquery 使用数据表可以防止在点击tr td内的按钮时打开其他模式，而点击tr会打开另一个模式

所以我有一个网页，其中有一个表。我已经链接了每一个tr，打开一个显示细节的模态。
在最后一列我有一些按钮来执行特定的任务，例如编辑.
我已经提到了这个question，并实现了一些级别或功能。我的按钮确实打开了正确的模态，但是当我点击外部或者我点击模态的输入元素或者关闭按钮时，链接到tr的模态打开了。
有人能帮我修复它，这样当我点击按钮时，只有链接到它的模态打开并正常工作，就像，它接受输入并正常关闭，而不是打开链接到tr的模态？
编辑按钮打开正确的模态。但是，如果我单击模态上的任何位置，它将关闭并打开通过锚按钮链接到tr的模态。
我想要的是modalBtn打开链接到它的模态，一切都正常工作。如果我关闭了这个modal，链接到tr的modal就不会打开。基本上我想在这个场景中有两个模态。一个是当我点击tr上的任何地方时打开的，一个是当我点击最后一列tr内的编辑按钮时打开的模态。请尽量简化你的回答，谢谢。
澄清一下我最初的问题：我可以将我的函数应用于所有tr标签。问题是最后一列有按钮。其中两个按钮链接到自己独特的模态。当我点击tr中的任何位置时，正确的模式就会打开。另外，当我点击按钮时，正确的模态打开。这里出现了问题，当我点击屏幕上的任何地方，甚至是当前模态输入元素时，当前模态关闭并打开链接到tr标签的模态，该标签正常工作。我想要的是每一个模态都能正常工作。
我已经修改了代码，所以你可以简单地运行html和检查问题，这不是原来的表只是我的问题的一个小例子。
第一个问题是通过this答案解决的。第二部分是如何做同样的功能时，使用它与数据表。目前，当我点击列标题进行排序时，排序后点击tr元素不会打开链接到它的模态。

$(document).ready(() => {
  Array.from($('tr[id*="Deets"]')).forEach(element => {
    element.addEventListener('click', (e) => {
      if (e.target.parentElement.classList.contains('modalBtn')) {
        e.stopPropagation()
      } else {
        document.querySelector(`#anchor${element.id.split('Deets')[1]}`).click()
      }
    })
  });
  Array.from($('td .modalBtn')).forEach(ele => {
    console.log(ele);
    ele.addEventListener('click', (e) => {
      e.stopPropagation();
      console.log(e.target.parentElement.nextElementSibling.getAttribute('id'));
      $(`#${e.target.parentElement.nextElementSibling.getAttribute('id')}`).modal('show');
    })
  })
})

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
    <title>Hello, world!</title>
</head>

<body>
    <table class="table table-borderless datatable">
        <thead>
            <tr>
                <th scope="col" class="w-30">Remarks</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr id="demoDeets1">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets1"></a>
            <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <tr id="demoDeets2">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor2" data-bs-toggle="modal" data-bs-target="#demoDeets2"></a>
            <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <tr id="demoDeets3">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">

                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets3"></a>
            <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

</body>

</html>

数据表编码：

$(() => {
  const dataTable = new simpleDatatables.DataTable(".datatable");
  $('.table').on('click', 'tr[data-target*="Deets"] td', function (e) {
    if ($(this).find('.modalBtn').length === 0) {
      const target = $(this).closest("tr").data("target");
      $(target).modal("show");
    }
  });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless datatable">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

你的代码太复杂了，你的HTML无效。
这里是一个更好的版本，因为你的按钮是在自己的td

$(() => {
  let table = new DataTable('.table');
  $('.table').on('click', 'tr[data-target*="Deets"] td', function(e) { // listen for clicks in cells
    if ($(this).find('.modalBtn').length === 0) { // only react if there is not a button
      const target = $(this).closest("tr").data("target"); // get the data-target from row
      $(target).modal("show"); // show the target
    }
  });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

如果选择datatable，则脚本不会按行工作
我只是完全浪费了我的时间来创建这个脚本，它应该工作，但它不，因为垃圾数据表脚本不排序的行！！！它只是替换单元格内容。
我必须使用第一个单元格中的标签来保存行索引。

$(() => {
  const dataTable = new simpleDatatables.DataTable('.datatable');
  const $datatable = $('.datatable-table');
  $datatable.on('click', 'tr td', function(e) { // listen for clicks in cells
    if ($(this).find('.modalBtn').length === 0) { // only react if there is not a button
      // BUT use the button to get the row
      const editTarget = $(this).closest('tr').find('td a.modalBtn').attr('data-bs-target'); // get the data-target from row
      const target = editTarget.replace('edit', 'demoDeets');
      $(target).modal('show'); // show the target
    }
  });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless datatable">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

jquery 使用数据表可以防止在点击tr td内的按钮时打开其他模式，而点击tr会打开另一个模式

1条答案

相关问题

热门标签

最新问答