Question

假设我们在gridview中选择行，然后从gridview获取一个数字。假设我们从gridview获得8个数字然后如何在html表中添加带有文本框的8行。它是否可能，以及它如何与jquery .append（）一起使用，在此先感谢。

Answer 1

我不确定我是否正确地理解了这个问题，但是对于jquery来说这是可能的并且非常简单。您的脚本应该类似于：

function appendTable(numberOfRows) {
        var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
        for (var i = 0; i < numberOfRows; i++) {
            $('#yourTable').append(row);
        }
    }

Answer 2

以下是添加行和删除行的完整示例：

<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-add").on('click', function() {
            var singleRow = $(".singleRow").eq(0).clone();

            singleRow.find('.btn-add')
                .removeClass('btn-succcess')
                .addClass('btn-danger')
                .removeClass('btn-add')
                .addClass('remove')
                .html("X");

            singleRow.find('input').each(function(i, input) {
                $(input).val('');
            });

            $("#wrapper").append(singleRow);
        });

        $(document).on('click', ".remove", function() {
            $(this).parent().remove();
        });
    });
</script>
<style type="text/css">
    .singleRow {
        padding: 10px 0;
    }
</style>
</head>

<body>
    <div class="container">
    <form role="form" autocomplete="off" id="wrapper">
        <div class="row singleRow">
            <div class="col-md-3">
                <input class="form-control" name="name[]" type="text">
            </div>
            <div class="col-md-3">
                <input class="form-control" name="phone[]" type="text">
            </div>
            <div class="col-md-1">
                <select name="opt[]" class="form-control">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <button type="button" class="btn btn-success btn-add">
                +
            </button>
        </div>
    </form>
    </div>
</body>    
</html>

动态添加表

2 个答案: