动态地将行添加到表中，该表保存每列中的选择下拉列表

Question

Hi guys a few days ago you kindly helped me to do THIS and now i am trying to do the same but with a table.

I have a table with two colums and one row in the beginning. the user can choose a language from the first column and the proficiency level in the second column.

now, i want to add one more row with above mentioned elements onClick, with a hardcoded max limit that i can change if i need to.

also a number has to be appended to the name of the select elements like nativelang0, nativelang1, etc.

I have tried to add my selects into a table while using this code:

<label for="nativelang" >Native language:</label>
            <select name="nativelang" id="nativelangdrop" required>
                <?php
                    if ($file = @fopen('txt/languages.txt', 'r')) {
                    while(($line = fgets($file)) !== false) {
                    echo "<option>{$line}</option>";
                    }
                    fclose($file);
                    }
                ?>
            </select>
            <span id="additionalNative"></span>

            <div id="plusBtnNative" align="left" style="position:relative; display:block;">
            <a href="javascript:;">
            <img id="addBtnNative" title="Add another language" width="15" height="15" border="0" src="img/plus.png" alt="add Native Language"></img>
            </a>
            </div>

and this:

<script>
var totaln;
totaln = 2;


$("#addBtnNative").on("click", function() {
    var ctr = $("#additionalNative").find(".extraN").length;
    if (ctr < totaln) {
        var $dd = $("#nativelangdrop").clone();
        $dd.attr("id", "dd" + ctr);
        $dd.attr("name", "nativelang" + ctr);
        $dd.addClass("extraN");
        $("#additionalNative").append($dd);
    }
});
</script>

but i cant seem to make it work in a table with dublicating rows...

my table is like this

<table class="languages">
    <tr>
        <td>Language</td><td>Level</td>
    </tr>
    <tr>
        <td>
            <select name="nativelang" id="nativelangdrop" required>
                    <?php
                        if ($file = @fopen('txt/languages.txt', 'r')) {
                        while(($line = fgets($file)) !== false) {
                        echo "<option>{$line}</option>";
                        }
                        fclose($file);
                        }
                    ?>
                </select>
        </td>
        <td>
            <select name="langlevel" id="langleveldrop" required>
                    <?php
                        if ($file = @fopen('txt/levels.txt', 'r')) {
                        while(($line = fgets($file)) !== false) {
                        echo "<option>{$line}</option>";
                        }
                        fclose($file);
                        }
                    ?>
                </select>
        </td>
    </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

and i tried it like this but to no avail... when i click add i get empty rows. what do i have to change to make the rows have the select elements in them?

thanks for your help.

Answer 1

Just use the same concept that you have on your first duplication code, just copy the row and append:

<table class="languages">
    <tr>
        <td>Language</td><td>Level</td>
    </tr>
    <tr class="initial">
        <td>
            <select name="nativelang" class="nativelangdrop" required>
            <option>test1</option>
            <option>test1</option>
            <option>test1</option>
            <?php
            if ($file = @fopen('txt/languages.txt', 'r')) {
                while(($line = fgets($file)) !== false) {
                    echo "<option>{$line}</option>";
                }
                fclose($file);
            }
            ?>
            </select>
        </td>
        <td>
            <select name="langlevel" class="langleveldrop" required>
            <option>test1</option>
            <option>test1</option>
            <option>test1</option>
            <?php
            if ($file = @fopen('txt/levels.txt', 'r')) {
                while(($line = fgets($file)) !== false) {
                    echo "<option>{$line}</option>";
                }
                fclose($file);
            }
            ?>
            </select>
        </td>
    </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var count = 1;
$(document).ready(function(){

    $('.add-author').on('click', function(e){
        if($('.nativelangdrop').length < 3) {
            count++;
            var initial_row = $('tr.initial').first().clone();
            var nativelang_name = initial_row.find('td:eq(0) select').attr('name'); // first td select
            var langlevel_name = initial_row.find('td:eq(1) select').attr('name'); // second td select
            initial_row.find('td:eq(0) select').attr('name', nativelang_name + count);
            initial_row.find('td:eq(1) select').attr('name', langlevel_name + count);
            $('table.languages').append(initial_row);
        }
    });

});
</script>