Question

大家好几天你帮助我做THIS，现在我正在努力做同样的事情，但是有一张桌子。

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

现在，我想在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元素？

感谢您的帮助。

Answer 1

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

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

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

1 个答案: