Javascript 动态地将行添加到表中，该表在每列中都包含一个select下拉列表

嗨，伙计们，几天前你们好心地帮我做了这些，现在我也在尝试做同样的事情，但是有一张桌子

我有一张桌子，桌子的开头有两列和一排。用户可以从第一列中选择语言，在第二列中选择熟练程度

现在，我想用上面提到的元素onClick再添加一行，如果需要，我可以更改硬编码的最大限制

还必须在选择元素（如nativelang0、nativelang1等）的名称后附加一个数字

在使用以下代码时，我尝试将我的选择添加到表中：

<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>

这是：

<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>

但我似乎不能让它在一个有可疑行的桌子上工作

我的桌子是这样的

<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>

我就这样试过，但没用。。。单击“添加”时，将得到空行。 要使行中包含select元素，我必须更改什么

---

谢谢您的帮助。

只需使用与第一个复制代码相同的概念，只需复制行并附加：

<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>

---

很好，太好了。但是，我怎样才能使选择有一个计数器，为每个新项目显示一个数字，这样我就可以将输出保存在不同字段的数据库中呢？如何限制行的数量？就像我贴的例子一样。对不起，我对你真的一点也不在行jquery@EntangledQuantum你可以限制它，就像你的长度一样。然后检查长度是否小于5或更多。不要尝试这样做：name=nativelang1，nativelang2。而是使用name=nativelang[]分组名称。因此，在PHP中，您不需要硬编码它们中的每一个。你可以把它叫做$_POST['nativelang']。然后，它将包含一个所有选定项的数组。我有理由说，我绝望地迷失了方向我只是个初学者。我不能只添加一个最大值的整数，然后将这些数字添加到我的选择中，比如1,2,3，因为它已经在我的数据库中了，我只想获取它们并将它们添加进去。无论如何，谢谢你帮我：@EnguredQuantum哦，好吧，你已经有了nativelang1、2等专栏。检查我的修正谢谢你善良的先生！这真是妙极了！：