通过jQuery

时间:2017-03-15 15:02:54

标签: javascript jquery html

我创建了一个只有三个输入的表单,一个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当用户将输入中的信息添加到表中时,隐藏字段为

的间隙

enter image description here

我怎么能解决这个问题?

0 个答案:

没有答案