テーブルに多くの行を追加できますが、多くの行を削除することはできません。順次追加ごとに1行しか削除できません。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>');
$("#remCF").on('click',function(){
$(this).parent().parent().remove();
});
});
});
</script>
<table class="form-table" id="customFields">
<tr valign="top">
<th scope="row"><label for="customFieldName">Custom Field</label></th>
<td>
<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" />
<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" />
<a href="javascript:void(0);" id="addCF">Add</a>
</td>
</tr>
</table>
コードは http://jsfiddle.net/3AJcj/ で確認できます
私は助けが必要です。
ページごとに一意のIDを1つだけ持つことができます。これらのIDをクラスに変更し、jQueryセレクターも変更します。
また、一度だけ設定する必要があるため、.on()を.click()関数の外側に移動します。
http://jsfiddle.net/samliew/3AJcj/2/
$(document).ready(function(){
$(".addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
JQueryを使用して、このようなテーブル行を動的に追加および削除できます。
ここにhtml部分があります...
<form id='students' method='post' name='students' action='index.php'>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><input type='text' id='first_name' name='first_name[]'/></td>
<td><input type='text' id='last_name' name='last_name[]'/></td>
<td><input type='text' id='tamil' name='tamil[]'/></td>
<td><input type='text' id='english' name='english[]'/> </td>
<td><input type='text' id='computer' name='computer[]'/></td>
<td><input type='text' id='total' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
</form>
次にjqueryを含める必要があります...
<script src='jquery-1.9.1.min.js'></script>
最後に、テーブルの行を追加するスクリプト...
<script>
var i=2;
$(".addmore").on('click',function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
data +="<td><input type='text' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' name='tamil[]'/></td><td><input type='text' id='english"+i+"' name='english[]'/></td><td><input type='text' id='computer"+i+"' name='computer[]'/></td><td><input type='text' id='total"+i+"' name='total[]'/></td></tr>";
$('table').append(data);
i++;
});
</script>
他の答えに加えて、削除をより一般的なものに改善したいと思います:
_$(this).closest('tr').remove();
_
これは、要素の深さに依存しないため、$(this).parent().parent().remove();
を使用するよりもはるかに優れています。そのため、行の構造はより柔軟になります。
IDをクラスに変更:
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
$(".remCF").on('click',function(){
$(this).parent().parent().remove();
});
ここには複数の問題があります
Ex
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>');
});
$("#customFields").on('click', '#remCF', function(){
$(this).parent().parent().remove();
});
});
デモ: フィドル
このデモ idプロパティが削除される場所を参照してください。
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
});
$("#customFields").on('click', '.remCF', function(){
$(this).parent().parent().remove();
});
});
それを試してください:
<script>
$(document).ready(function(){
var add = '<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td>';
add+= '<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> ';
add+= '<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> ';
add+= '<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>';
$(".addCF").click(function(){ $("#customFields").append(add); });
$("#customFields").on('click','.remCF',function(){
var inx = $('.remCF').index(this);
$('tr').eq(inx+1).remove();
});
});
</script>
ライブビューLink Jsfiddle
それを解決できる簡単な方法はさまざまです.....私が新しく収集したコードを見てみましょう。
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
$(document).ready(function() {
$(".add-row").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function() {
$("table tbody").find('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
});
});
form {
margin: 20px 0;
}
form input,
button {
padding: 6px;
font-size: 18px;
}
table {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
background: #fff;
}
table,
th,
td {
border: 1px solid #cdcdcd;
}
table th,
table td {
padding: 10px;
text-align: left;
}
body {
background: #ccc;
}
.add-row,
.delete-row {
font-size: 16px;
font-weight: 600;
padding: 8px 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="record">
</td>
<td>Peter Parker</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<script>
$(document).ready(function(){
var add = '<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td>';
add+= '<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> ';
add+= '<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> ';
add+= '<a href="javascript:void(0);" class="remCF">Remove</a></td></tr>';
$(".addCF").click(function(){ $("#customFields").append(add); });
$("#customFields").on('click','.remCF',function(){
var inx = $('.remCF').index(this);
$('tr').eq(inx+1).remove();
});
});
</script>
$(document).ready(function () {
Addrow();
})
$("#add").click(function () {
Addrow();
})
rowcount = $("#tbuser td").closest.length;
function Addrow() {
rowcount++;
debugger
var markup = "<tr><td></td><td><input type='text' name='stuclass' id='stuclass'/></td><td><select name='Institute' class='Institute_" + rowcount + "'></select></td><td><input type='text' name='obtmark' id='obtmark'/></td><td><input type='text' name='totalmark' id='totalmark'/></td><td><input type='text' name='per' id='per'/></td><td><button type='button' id='delete' onclick='deleterow(this);'>DELETE</button></td></tr>";
$(".tbuser tbody").append(markup);
$.ajax({
type: 'GET',
url: '@Url.Action("bindinst", "Home")',
data: '',
dataType: "json",
success: function (data) {
debugger;
$(".Institute_" + rowcount).empty();
$(".Institute_" + rowcount).append('<option Value="">--Select--</option>');
$.each(data, function (i, result) {
$(".Institute_" + rowcount).append('<option Value="' + result.Value + '">' + result.Text + '</option>');
});
},
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>`enter code here`
$(document).ready(function () {
var result=1;
$('input').keyup(function(){`enter code here`
$('tr').each(function () {
var sum = $(this).find('td.combat').text();
var combat = $(this).find('input.combat').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find('.total-combat').html(result);
});
});
$('.add').click(function(){
var sno = $(this).parent().siblings('.sno').text();
var cust = $(this).parent().siblings('.cust').text();
var price = $(this).parent().siblings('td.combat').text();
var rowValue = [];
$(this).closest('tr').find("input").each(function() {
rowValue.Push($(this).val());
return $(this).val();
});
var rowValue1 = [];
$(this).closest('tr').find("span").each(function() {
rowValue1.Push($(this).text());
return $(this).val();
});
var markup = "<tr><td class='sno'>" + sno + "</td><td class='custname'>" + cust +"</td><td class='price'>" + price +"</td><td><input type='text' class='newtext' value="+ rowValue[0] +"></td><td class='total'>" + rowValue1[0] +"</td><td><input type='submit' class='update' value='upd'><input type='button' class='del' value='del'></td></tr>";
var rightcol = $(this).closest('tr').find(".cust");
var row_count = $('.tbl1 tbody tr').length;
alert(row_count);
if (row_count == 0) {
$(".tbl1 tbody").append(markup);
}
else
{
var tes=0;
$('.tbl1 tbody tr').each(function(){
var leftcol = $(this).find(".custname");
if(rightcol.html() == leftcol.html()) {
alert(leftcol.html()+"-----------------"+rightcol.html());
$(this).find('.sno').text(sno);
$(this).find('.custname').text(cust);
$(this).find('.price').text(price);
$(this).find('.newtext').val(rowValue[0]);
$(this).find('.total').text(rowValue1[0]);
tes++;
}
});
if(tes==0){
$(".tbl1 tbody").append(markup);
}
}
});
$(".tb").on("click", ".update", function(e) {
var rowValues = [];
$(this).closest('tr').find("input").each(function() {
rowValues.Push($(this).val());
return $(this).val();
});
var total=$(this).closest('tr').find('.total').text();
var right_cols = $(this).closest('tr').find(".custname");
$('.tbl tbody tr').each(function(){
var row = $(this);
var left_cols = $(this).find(".cust");
if(left_cols.html() == right_cols.html()) {
$(this).find('.text').val(rowValues[0]);
$(this).find('.total-combat').text(total);
}
});
});
$(".tb").on("keyup", "input", function() {
$('tr').each(function () {
var sum = $(this).find('td.price').text();
var combat = $(this).find('input.newtext').val();
if (!isNaN(sum) && sum.length !== 0 && !isNaN(combat) && combat.length !== 0) {
result = parseFloat(sum)*parseFloat(combat);
}
$(this).find('.total').html(result);
});
});
$(".tb").on("click", ".del", function() {
$(this).closest('tr').remove();
});
});
</script>
<style>
.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 5px solid #ff751a;
padding: 5px;
}
table tr th{
border: 5px solid #79ff4d;
padding: 5px;
}
input{
width:35px;
}
.tbl1{
margin-top: 50px;
border: 0px solid #cdcdcd;
}
.btn{
float:left;
}
</style>
<title>E-Commerce-Table</title>
</head>
<body>
<div class="table_style">
<caption>Price-List</caption>
<table class="tbl">
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
<tbody>
<tr>
<td class="sno">1</td>
<td class="cust">A</td>
<td class="combat">5</td>
<td class="tester"><input type="number" id="qnty1" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">2</td>
<td class="cust">B</td>
<td class="combat">8</td>
<td><input type="number" id="qnty2" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">3</td>
<td class="cust">C</td>
<td class="combat">7</td>
<td><input type="number" id="qnty3" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
<tr>
<td class="sno">4</td>
<td class="cust">D</td>
<td class="combat">2</td>
<td><input type="number" id="qnty4" name="Qnty" value="0" class="combat text"></td>
<td><span class="total-combat"></span></td>
<td><input type="submit" name="submit" value="Add" class="add"></td>
</tr>
</tbody>
</table>
<table class="tbl1">
<thead>
<tr>
<th>S.No</th>
<th>P.Name</th>
<th>Price</th>
<th>Qnty</th>
<th>Rate</th>
<th>action</th>
</tr>
</thead>
<tbody class="tb">
</tbody>
</table>
<button type="submit" name="addtocart" id="btn">Add-to-cart</button>
</div>
</body>
</html>