如何为这些表使用不同的ID

时间:2019-08-05 10:35:38

标签: javascript jquery html-table

如何使用ready。(function(){})对不同的表使用不同的ID。这在Apache服务器上运行。我想使用不同的ID访问这些表。这样我们就可以编辑一个表而不影响另一个表。 在这段代码中,我使用的是ready.function,那东西访问了代码中所有可用的表

    <html>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!--Javascript-->
    <script type="text/javascript">
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
            var actions = $("table td:last-child").html();
            // Append table with add row form on add new button click
            $(".add-new").click(function() {
                $(this).attr("disabled", "disabled");
                var index = $("table tbody tr:last-child").index();
                var row = '<tr>' +
                    '<td><input type="text" class="form-control" name="sno" id="sno"></td>' +
                    '<td><input type="text" class="form-control" name="org" id="org"></td>' +
                    '<td><input type="text" class="form-control" name="phone" id="phone"></td>' +
                    '<td><input type="text" class="form-control" name="fperiod" id="fperiod"></td>' +
                    '<td><input type="text" class="form-control" name="tperiod" id="tperiod"></td>' +
                    '<td><input type="text" class="form-control" name="dest" id="dest"></td>' +
                    '<td><input type="text" class="form-control" name="remark" id="remark"></td>' +
                    '<td>' + actions + '</td>' +
                    '</tr>';
                $("table").append(row);
                $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
                $('[data-toggle="tooltip"]').tooltip();
            });
            // Add row on add button click
            $(document).on("click", ".add", function() {
                var empty = false;
                var input = $(this).parents("tr").find('input[type="text"]');
                input.each(function() {
                    if (!$(this).val()) {
                        $(this).addClass("error");
                        empty = true;
                    } else {
                        $(this).removeClass("error");
                    }
                });
                $(this).parents("tr").find(".error").first().focus();
                if (!empty) {
                    input.each(function() {
                        $(this).parent("td").html($(this).val());
                    });
                    $(this).parents("tr").find(".add, .edit").toggle();
                    $(".add-new").removeAttr("disabled");
                }
            });
            // Edit row on edit button click
            $(document).on("click", ".edit", function() {
                $(this).parents("tr").find("td:not(:last-child)").each(function() {
                    $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
                });
                $(this).parents("tr").find(".add, .edit").toggle();
                $(".add-new").attr("disabled", "disabled");
            });
            // Delete row on delete button click
            $(document).on("click", ".delete", function() {
                $(this).parents("tr").remove();
                $(".add-new").removeAttr("disabled");
            });
        });
    </script>

    <body>

        <div class="form-group">
            <div class="table-wrapper">
                <div class="table-title">
                    <div class="row">
                        <div class="col-sm-8">
                            <h2></h2></div>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
                <!--TAble 1-->
                <table class="table table-responsive table-bordered table-hover" name="table1" id="table1" style="overflow-x:auto;">
                    <thead>
                        <tr class="info">
                            <th>S.No.</th>
                            <th>Course Name</th>
                            <th>Period From</th>
                            <th>Period To</th>
                            <th>Period Result</th>
                            <th>Marks Obtained</th>
                            <th>Remarks</th>
                            <th>Delete/Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ABC</td>
                            <td>Administration</td>
                            <td>Administration</td>
                            <td>Administration</td>
                            <td>Administration</td>
                            <td>Administration</td>
                            <td>(171) 555-2222</td>
                            <td>
                                <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                                <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                                <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="form-group">
                    <div class="table-wrapper">
                        <div class="table-title">
                            <div class="row">
                                <div class="col-sm-8">
                                    <h2></h2></div>
                                <div class="col-sm-4">
                                    <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
                                    <br>
                                    <br>
                                </div>
                            </div>
                        </div>

                        <!--Table 2-->
                        <table class="table table-responsive table-bordered table-hover" name="table2" id="table2" style="overflow-x:auto;">
                            <thead>
                                <tr class="info">
                                    <th>S.No.</th>
                                    <th>Organisation</th>
                                    <th>Phone No.</th>
                                    <th>Period From</th>
                                    <th>Period To</th>
                                    <th>Designation</th>
                                    <th>Remarks</th>
                                    <th>Delete/Edit</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>ABC</td>
                                    <td>Administration</td>
                                    <td>Administration</td>
                                    <td>Administration</td>
                                    <td>Administration</td>
                                    <td>Administration</td>
                                    <td>(171) 555-2222</td>
                                    <td>
                                        <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                                        <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                                        <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
    </body>

    </html>

我想使用不同的ID访问这些表。

1 个答案:

答案 0 :(得分:0)

是否可以通过随机文本生成并分配给表。 分配表后,将相同的内容推入新数组。

console.log(Math.random().toString(7).substring(2, 7));

在将动态ID分配给表之后,您将通过推送的数组来获取表。

Eg:-
var new_arr = [
0=>''12313,
1=>'12398',
2=>'76561'
]

您将可能获得这些表格。

 $('#'+new_arr[0]).html();