通过单击动态加载的表中同一行的另一个字段来更新一行的字段

Update field of a row by clicking on another field of the same row in a table which is loaded dynamically

本文关键字：一行字段另一个更新单击动态加载更新时间：2023-09-26

下面我试图通过单击按钮为输入字段创建一个日期选择器元素。由于所有的日期选择器都有相同的类名，所以单击按钮会将所有日期选择器更改为输入字段。但我只想更改按钮行中的数据选择器。

HTML

  <!DOCTYPE html>
    <html>
      <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <link rel="stylesheet" href="custom.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      </head>
      <body>
    <div>
    <div class="row">
    <div class="input-field col s6 offset-s2">
        <input id="contact" type="text" class="validate">
        <label for="Contact">Enter contact name.</label>
     </div>
     <div class="md col s4">
    <a class="bt waves-effect waves-light btn">Search</a>
     </div>
    </div>
  <div class="table-margin">
  <table id="mytable">
          <thead>
            <tr>
                <th data-field="id">Contact Name</th>
                <th data-field="phone">Phone</th>
                <th data-field="Data"> Data</th>
                <th data-field="Action"> Action</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
        </div>

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <script src="script.js"></script>
        <script src="new.js"></script>
      </body>
    </html>

JS1

        $(document).ready(function() {

          var status = [
                        {
                        "id": 1,
                        "name": "sourabh",
                        "phone": "811880",
                        "email":"sourabhgrg713@gmail.com"
                        },
                        {
                        "id": 6,
                        "name": "sourabh",
                        "phone": "255888888",
                        "email": "Sourabhgrg713@gmail.com"
                        },
                        {
                        "id": 6,
                        "name": "sourabh",
                        "phone": "255888888",
                        "email": "Sourabhgrg713@gmail.com"
                        },
                        {
                        "id": 6,
                        "name": "sourabh",
                        "phone": "255888888",
                        "email": "Sourabhgrg713@gmail.com"
                        }];
        var len  = status.length;
        var x= '<input type="date" class="dt datepicker">';
        var y=  '<button class="make waves-effect waves-light btn" type="button">Update</button>';
        data = "";
           if(len > 0){
            for (var i = 0; i < len; i++){
                data = data + "<tr><td>"+status[i].name+"</td><td>"+status[i].phone+"</td><td>"+x+"</td><td>"+y+"</td><tr>";
           }
        }
       $("#mytable tbody").append(data)

        });

Js2.

     $(document).ready(function() {
     $('.datepicker').pickadate({
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 15 // Creates a dropdown of 15 years to control year
      });

     $('.make').click(function(){
        var x = this.rowIndex;
        console.log(x);
        $('.dt').replaceWith($('<input type="text" value="Input box">'));
     });});

使用$(this).closest("tr").find(".dt")而不是$(".dt")，这样它只会选择与您单击的元素位于同一行的日期选择器。