Question

我在同一页面的表格格式中显示表单详细信息。但是当我保存多次表行也增加时，所以我想显示3行，只剩下的行将在滚动或分页中显示。

<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" />

<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" />

<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea>

 <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button>
 </form>

例如，相同的邮件ID显示第二次它不允许。

$("button#savebutton").click(function() {
 var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//---->Form validation goes here
var new_row = '<tr><td class="name">' + name + '</td><td class="email">' + email + '</td><td class="message">' + message + '</td></tr>';
$("table tbody").append(new_row);
 });

Answer 1

以下是您问题的解决方案。

在追加行后禁用保存button。
当输入/测试区域发生更改时，启用保存button。

查看下面的工作代码。

$("button#savebutton").click(function() {
 var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//---->Form validation goes here
var new_row = '<tr><td class="name">' + name + '</td><td class="email">' + email + '</td><td class="message">' + message + '</td></tr>';
$("table tbody").append(new_row);

//disable the save button after appending row
$(this).prop("disabled",true);

});

//listen to change in input/textare and then enable the save button
$(document).on('change', 'input, textarea', function() {

  if($("button#savebutton").is(':disabled')){
    $("button#savebutton").prop("disabled",false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" />

<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" />

<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea>

 <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button>
 </form>

如何在表中限制行，并且不允许重复行

1 个答案: