0
gridviewで行を選択し、gridviewから1つの数値を取得するとします。グリッドビューから8つの数値を取得した後、テキストボックス付きのHTMLテーブルに8行を追加する方法を考えてみましょう。それは可能であり、どのようにjquery .append()と一緒に使用するのですか、事前に感謝します。テーブルに行を動的に追加する
gridviewで行を選択し、gridviewから1つの数値を取得するとします。グリッドビューから8つの数値を取得した後、テキストボックス付きのHTMLテーブルに8行を追加する方法を考えてみましょう。それは可能であり、どのようにjquery .append()と一緒に使用するのですか、事前に感謝します。テーブルに行を動的に追加する
<!DOCTYPE html>
<html>
<head>
<title>JS</title>
<link rel="stylesheet" type="text/css" href="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" placeholder="Name" name="name" type="text" value="Dynamic Form Fields">
</div>
<div class="col-md-3">
<input class="form-control" placeholder="Phone No." name="phone" type="text" value="Dynamic Form Fields">
</div>
<div class="col-md-1">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add">
+
</button>
</div>
<!-- here it will append -->
</form>
</div>
</body>
</html>
私は質問を正しく理解しているかどうかはわかりませんが、はい、それは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);
}
}