Javascript 模态按钮只对每一行起作用，是什么使它不能对每一行起作用？_Javascript_Html_Css_Twitter Bootstrap_Bootstrap Modal

Javascript 模态按钮只对每一行起作用，是什么使它不能对每一行起作用？

javascript html css twitter-bootstrap

Javascript 模态按钮只对每一行起作用，是什么使它不能对每一行起作用？,javascript,html,css,twitter-bootstrap,bootstrap-modal,Javascript,Html,Css,Twitter Bootstrap,Bootstrap Modal,HTML代码： <html> <head> <link rel="stylesheet" type="text/css" href="css/tablestyle.css"> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1

HTML代码：

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>

引入表数据的Json代码：

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>

{
    "person": [
    {
       "firstName": " ",
       "lastName": "Kent",
       "job": "Reporter",
       "roll": 20,
       "hours":10
   },
   {
       "firstName": " ",
       "lastName": "Wayne",
       "job": "Playboy",
       "roll": 30,
       "hours":20
   }
   ]
  }

所发生的情况是，我在行的开头使用的按钮只对其他行起作用。该按钮本质上允许用户接受或拒绝给定行中的数据，因此每行都需要该按钮。该表必须是动态的，以便从本地HTML页面以外的源读入信息。如果我要添加3个表行，三个按钮中只有两个可以工作，即使这样，有时模式视图也会停止工作。例如，按下按钮后，模式视图将显示另外两个按钮，从现在起，如果单击其中一个按钮，视图将关闭。但是，当添加更多行时，当单击初始行中的按钮时，模式视图中的按钮（在单击表行中的按钮后显示）不起作用。这是在初始按钮的顶部，只对每一行起作用

如果在添加所有行之后添加处理程序，会怎么样

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>

$(function() {
  var people = [];

  $.getJSON('datasource/people.json', function(data) {
    $.each(data.person, function(i, f) {
      var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
      $(tblRow).appendTo("#userdata tbody");
    });

    // Add the click handler after adding all table rows
    $('#userdata').on('click', '.toggleModal', function (e) {
      $('.modal').toggleClass('active');
    });
  });
});

$（函数（）{
var people=[]；
$.getJSON（'datasource/people.json'，函数（数据）{
每人$（数据、人员、职能（i、f）{
var tblRow=“+”时间表审批“+”+f.lastName+++++f.job+++f.roll+++++f.hours++”
$（tblRow）.appendTo（“#userdata tbody”）；
});
//添加所有表行后添加单击处理程序
$（'#userdata'）。on（'click'，'.toggleModal'，函数（e）{
$（'.modal'）.toggleClass（'active'）；
});
});
});

否则，您将在第一行添加一次处理程序，在第二行添加两次，在第三行添加三次，以此类推

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>

这就是为什么它在每一行上都有效。切换两次（或任何可被2整除的数字）将使其先打开，然后关闭

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>

另外，你的

放在一个奇怪的地方（在你的电脑里）。

哎呀，我不小心上传了一个旧版本的代码。我已经编辑并做出了您建议的更改，但我仍然有相同的问题。很抱歉，您是对的，我犯了一个小语法错误。非常感谢您的快速回复。太棒了！很高兴这有帮助。别忘了将问题标记为已回答，以便其他人知道你已经找到了你要找的内容。我对HTML、CSS等非常陌生。你有没有推荐学习的地方，或者关于这些语言的任何指导？嗯。没什么特别的：我只是通过实践来学习的。有一些资源，如edx、codecademy、khanacademy、thenewboston等，但我从未使用过它们中的任何一个。

      <html>
             <head>
           <link rel="stylesheet" type="text/css" href="css/tablestyle.css">
        </head>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

            <script type="text/javascript" src="datasource/people.json"> </script>

            <script>

            $(function() {

  var people = [];

   $.getJSON('datasource/people.json', function(data) {
      $.each(data.person, function(i, f) {
        var tblRow = "<tr>" + "<td><button class='button-border   toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "  <td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + " </td>" + "<td>" + f.hours + "</td>" + " </tr>"
            $(tblRow).appendTo("#userdata tbody");

                     $('.toggleModal').on('click', function (e) {
                       $('.modal').toggleClass('active');

                    });
                     });

                });

              });
           </script>

             <body>
        <table id="userdata" rules="groups" style="border: 1px solid             black;">
<thead>

    <tr>
                    <th> </th>
                    <th>EmployeeNum</th>
                    <th>EmployeeName</th>
                    <th>ChargeNum</th>
                    <th>Hours</th>
            </tr>
      </thead>

    <tbody>



    </tbody>



          </table>
          <div class="modal">

<header>
  <button class="close toggleModal">Close</button>
        </header>

        <section>
  <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
       </section>

         <button class="button-border button-success toggleModal">
            <span class="icon"></span> Approve </button>

          <button class="button-border button-error pull-right toggleModal">
                <span class="icon">< </span> Disapprove </button>
                       <!-- <script> $(docuemnt).ready(function(){ -->
                           <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                    <!-- $("#a").style.color = "red"}); -->
                    <!-- </script> -->

           </div>


            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/index.js"></script>


          </body>
          </html>