动态添加表中的行

Question

Suppose we select the row in gridview then we get the one number from gridview. 假设我们在gridview中选择该行，然后从gridview中获得一个数字。 Suppose we get 8 number from gridview then how to add the Eight rows in html table with textboxes. 假设我们从gridview得到8个数字，然后如何在带有文本框的html表中添加八行。 is it possible, and how it use with jquery .append(), Thanks in Advance. 有可能吗，以及它如何与jquery .append（）结合使用，请提前感谢。

Answer 1

I am not sure that I understand the question properly, but yes it is possble and very simple with jquery. 我不确定我是否正确理解了这个问题，但是是的，使用jquery可能并且非常简单。 Your script should look something like: 您的脚本应类似于：

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

Here is a complete example for add row and remove row : 这是添加行和删除行的完整示例：

<!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 个解决方案

解决方案1
3 2016-12-14 05:17:00

解决方案2
-1 已采纳 2016-12-14 06:32:18

动态添加表中的行

问题描述

2 个解决方案

解决方案1 3 2016-12-14 05:17:00

解决方案2 -1 已采纳 2016-12-14 06:32:18

解决方案1
3 2016-12-14 05:17:00

解决方案2
-1 已采纳 2016-12-14 06:32:18