Question

下面我尝试通过单击按钮将datepicker元素设置为输入字段。由于所有日期选择器都具有相同的类名，因此单击按钮会将所有日期选择器更改为输入字段。但我想只更改该按钮行中的数据贴纸。

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">'));

     });});

Answer 1

使用$(this).closest("tr").find(".dt")代替$(".dt")，因此它只选择与您点击的元素位于同一行的日期选择器。

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

1 个答案: