3
私はこのHTML + this JQuery.JSを持っています このようなスクリプトは動作します。追加ボタンを押すとフォームが表の上に表示されます。非表示ボタンを押すと非表示になります。編集ボタンを押すと、フォームに入力するテキストが新しいTRに追加されます。 「送信」ボタンを使用して作成できます。ループのJqueryを作成する方法
私が今やりたいことは今です。各TDラインで、私はADD/HIDE/Editボタンを再度表示したいが、今度はEditを押す。新しいTRにある新しいテキストを編集したいと思います。 たとえば、最初にTR a、a、a、aを押します。編集bを押します。b、b、b、bを入力します。新しいTRがbbbbbで作成されます。もう一度bbbbb trにあるボタンをクリックします。私はそれがbbbbbラインを編集したい。私はそれよりもそれを説明する方法を知らない。あなたがidkを望むなら、私はskype経由でアクセスできます。事前に
$(document).ready(function() {
$('#submit').on('click', function() {
var valid = true,
message = '';
$('form input').each(function() {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x).val('');
}
$('.buttons').attr('rowspan', $('tr').length);
}
});
$(".hide").click(function() {
$("form").hide();
});
$(".add").click(function() {
$("form").show();
});
$(".edit").click(function() {
$("form").show();
$.each($(this).parent().parent().find('td'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function() {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons" style="vertical-align: top">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >助けてくれてありがとうは
はあなたを置き換えるために、編集を追加しましたl CDNでのocal jqueryスクリプト参照。今すぐコードスニペットを実行すると文句を言わない – DMcCallum83
...と私は編集を承認しましたが、他の誰かから別の承認が必要です –
クール。うまくいけば誰かがそれを見直す。あなたはAdd/Hide/Editボタンを '再表示'したいと言っていますが、実際には決して消えることはありません。多分あなたは期待された動作を詳述するステップの番号付きリスト、または現在の動作と期待される動作を更新する必要がありますか？ – DMcCallum83