动态地将行添加到表中,该表在每列中包含一个选择下拉列表

dynamicly add rows to a table which holds a select dropdown in each column

本文关键字:包含一 下拉列表 选择 添加 动态      更新时间:2023-09-26

嗨,几天前你们好心地帮助我做了这件事,现在我正在尝试做同样的事情,但有一张桌子。

我有一个表格,开头有两个列和一行。 用户可以从第一列中选择语言,在第二列中选择熟练程度。

现在,我想在 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>