我创建了一个只有三个输入的表单,一个HTML表和一个提交按钮
<div class="form-group">
<input type="text" id="inputText1" required>
<input type="text" id="inputText2" required>
<input type="text" id="inputText3" required>
</div>
<button type="button" class="btn btn-default" id="submit">Submit</button>
</form>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed" id="myTable" style="width:90%; margin:0 auto;">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
以这种方式工作: 每次用户单击提交按钮时,HTML表通过jQuery +两个链接按钮将输入的值添加到其行中,并将变量cont指定为隐藏元素中的数字,以便在更新时轻松找到行
$(document).ready(function () {
var cont=0;
$("#submit").click(function(e) {
e.preventDefault();
cont++;
var id = $("#inputText1").val().toLowerCase();
var lastname = $("#inputText2").val();
var name = $("#inputText3").val();
if (checkId(lastname)) {
return alert('El ID ya ha sido especificado');
}
$('#myTable tbody').append('<tr><td for="id">' + id + '</td><td for="lastname">' + lastname + '</td><td>' + name + '</td><td id="cont" style="visibility:hidden">' + cont + '</td><td><a href="#" id="select">Modificar</a><a href="#" id="eliminar"> Eliminar</a></td></tr>');
$("#inputText1").val('');
$("#inputText2").val('');
$("#inputText3").val('');
$('#inputText1').focus();
});
});
提交按钮工作正常问题是当我想修改一行时,我现在做的是用所选行的值填充输入,以便让用户修改其内容但我无法检索变量cont的值表示每行的特定和不同的数字,除此之外我不知道如果用户决定更新记录后如何更新表格的行,请你帮助我,这是我目前的jQuery代码
$(document).ready(function () {
$("#myTable").on('click', '#select', function (e) {
e.preventDefault();
var currentRow = $(this).closest("tr");
//var contador= currentRow.$("#cont").val();
//alert(contador);
//doesn't retrieve neither show anything
var col1 = currentRow.find("td:eq(0)").text();
var col2 = currentRow.find("td:eq(1)").text();
var col3 = currentRow.find("td:eq(2)").text();
$("#inputText1").val(col1);
$("#inputText2").val(col2);
$("#inputText3").val(col3);
});
});
并且还想dd当用户将输入中的信息添加到表中时,隐藏字段为
的间隙我怎么能解决这个问题?