将新行添加到表副本仅下拉列表

Question

我想使用 jquery 将带有 2 个选择下拉列的新行添加到我现有的表中，但我遇到了问题。

当我尝试我的代码时，我要么得到空的新行，要么所有内容都被复制。

我在 JSfiddle 中创建了一个示例。当我添加新行时，它会复制最后一行的所有内容。我只希望它复制下拉列表并将其余单元格为空，以便用户可以编辑它们。我不知道如何做到这一点。 任何帮助都会很棒。

https://jsfiddle.net/4hbskLec/1/

我的html示例代码：

<html>
<head>
<title>Filtered CSV File</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
</head>
  <body>
    <h1>
      Filtered CSV FIle
    </h1>
   <br/>
   <br/>
   <div class="myButtons">
     <input type="button" value="Add new row" class="btn btn-info" id="addRow">
     <input  type="button" value="Delete rows" id="delete-row" class="btn btn-info">
     <input style="float: right" id="myInput" type="text" placeholder="Search..">
   </div>
   <br/>
   <div class="table-responsive">
     <table class="dataframe my_class" id="my_id">
       <thead>
         <tr style="text-align:right;">
           <th> </th>
           <th>col1</th>
           <th>col2</th>
           <th>col3</th>
           <th>col4</th>
           <th>col5</th>
           <th>col6</th>
           <th>col7</th>
           <th>col8</th>
         </tr>
       </thead>

       <tbody>
         <tr>
           <th>1</th>
           <td>row1</td>
           <td>row1</td>
           <td>row1</td>
           <td><select name="code">
                    <option value="1">first</option>
                    <option value="2">second</option>
                </select>
                </td>
           <td>row1</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row1</td>
           <td>row1</td>
         </tr>
         <tr>
           <th>2</th>
           <td>row2</td>
           <td>row2</td>
           <td>row2</td>
           <td><select name="code">
                    <option value="1">first</option>
                    <option value="2">second</option>
                </select></td>
           <td>row2</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row2</td>
           <td>row2</td>
         </tr>
         <tr>
           <th>3</th>
           <td>row3</td>
           <td>row3</td>
           <td>row3</td>
           <td><select name="code">
                    <option value="1">first</option>
                    <option value="2">second</option>
                </select></td>
           <td>row3</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row3</td>
           <td>row3</td>
         </tr>
       </tbody>
     </table>
   </div>

  </body>
</html>

JS & Jquery 代码：

 $("#addRow").click(function(){
        $("#my_id").each(function(){
            var tds='<tr>';
            jQuery.each($('tr:last th', this), function(){
                tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
            });
            jQuery.each($('tr:last td', this), function(){
                tds += '<td>' + $(this).html() + '</td>';
            });
            tds+= '</tr>';
            $('tbody',this).append(tds);
            $('#my_id tbody tr:last').attr("contentEditable", true);
        });

    });

 //for the columns that need to be imported with dropdowns create editable option - temporarlly 
    $(function() {
    $("tr").each(function() {
        $(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
        });
    });

    //Find and remove selected table rows
    $('#delete-row').click(function(){
        var r = confirm('Are you sure you want to delete them all?');
        $("tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                if(r == true){
                    $(this).parents("tr").remove();
                }else{
                    return false;
                }

            }
        });
    });

     //create a searchbox for the filtered table 
    $(document).ready(function(){
        $('#myInput').on("keyup", function(){
            var value = $(this).val().toLowerCase();
            $('#my_id tbody tr').filter(function(){
                $(this).toggle($(this).text().toLowerCase().indexOf(value) >-1)
            });
        });
    });

CSS：

table {
            border-collapse: collapse;
            border: 1px black solid;
            font: 12px sans-serif;
            width: 100%;
            table-layout:auto;

        }
        td {
            border: 1px black solid;
            text-align: left;
            padding: 2px;
        }

        thead:hover{
            text-decoration: none !important;
        }

        thead tr:first-child{
            color:white;
            text-align: center;
            background-color: #5bc0de;
            padding: 10px;
        }
        tr:nth-child(even){
            background-color: #f2f2f2
        }

        tr:hover{
            background-color: #5bc0de;
        }
        button{
            display: inline;
            padding: 50px;
        }
        input button{
            display: inline;
        }
        .dropbtn{
            background-color: blue;
        }
        .table-responsive {
            overflow-y: auto;
            height: 800px;
        }
        .table-responsive table {
            border-collapse: collapse;
            width: 100%;
        }
        .table-responsive thead th{
            position: sticky;
            top: 0;
            background-color: #5bc0de;
            padding: 2px;
        }
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: darkgrey;
            outline: 1px solid slategrey;
        }
        .myButtons{
            display: inline;
            padding: 20px;
        }

编辑： 我的示例代码只有 8 列，但我的真实代码有 20 多列，所以直言不讳地添加每一列会太多

Answer 1

 $("#addRow").click(function(){
        $("#my_id").each(function(){
            var tds='<tr>';
            jQuery.each($('tr:last th', this), function(){
                tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
            });
            jQuery.each($('tr:last td', this), function(){

                    if($('select',this).length){ //Add this condition
                    tds += '<td>' + $(this).html() + '</td>';
                }else{
                    tds += '<td></td>';
                }
            });
            tds+= '</tr>';
            $('tbody',this).append(tds);
            $('#my_id tbody tr:last').attr("contentEditable", true);
        });

    });

我已经为你更新了 jsfiddle。 只需在现有代码中添加此条件即可。