Javascript，将值传递给新添加的表格行/单元格

Posted 2023-05-09

【中文标题】Javascript，将值传递给新添加的表格行/单元格

【英文标题】：Javascript, pass values to new added table row/cell

【发布时间】：2019-07-05 17:17:49

【问题描述】：

基本上这个请求的目标是有一个模态表，它添加新的表行/单元格并将“var OBGyneID = $(this).attr("id");”的值传递给第一个单元格和值“var billing_id = newID;”每当添加新行/单元格时，到第二个单元格。寻求您的帮助，谢谢！

*我的模式*

    <div id="myModal" class="modal fade card new-contact myModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="card profile">
                    <div class="profile__img">
                        <img src="img/profile2.jpg" >
                        <a href="#" class="zmdi zmdi-camera profile__img__edit"></a>
                    </div>
                    <div class="profile__info">                                         
                        <h3 style="text-transform:capitalize;" id="pxname" name="pxname"></h3>
                        <ul class="icon-list">
                            <li>LAST <p name="consdates" id="consdates"></p></li>
                            <li>Last visit: </li>
                            <li><i class="zmdi zmdi-twitter"></i> @mallinda-hollaway</li>
                        </ul>
                    </div>
                </div>              
                <div>
                    <div class="table-responsive">
                        <table id="billingTable" class="table table-inverse table-sm table-hover table-condensed" style="font-size:120%">
                            <thead> 
                                <th>OBDYID</th>
                                <th>CK</th>
                                <th>PROCEEDURE</th>
                                <th>AMOUNT</th>
                            </thead>
                            <tbody id="billing_body" style="text-transform:capitalize;">    
                                <form method="get" id="insert_form">                
                                    <tr>
                                        <td ><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID"></td>
                                        <td ><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>
                                        <td ><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>
                                        <td ><input type="text" style="width:100%;" class="Price" type="text" id="Price" name="Price"></td>                              
                                    </tr>
                                </form>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
                    <input type="submit" id="addRow" value="add" name="add" class="btn btn-info" />             
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

* MY JS 添加新行/单元格*

        $(document).ready(function () 
            $("#addRow").click(function () 
                $("#billingTable").append('<tr><td ><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID" ></td>'+
                            '<td ><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                            '<td ><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>'+
                            '<td ><input type="text" style="width:100%;" class="Price" type="text" id="Price" name="Price"></td></tr>');

                jQuery(".ExamDesc").autocomplete(
                    source: 'php/billingentry.php'
                ); 
            );
        );

* 将值传递给模态 * 这只会在模态弹出时传递值，但在添加新行/单元格时无法传递值。

            $(document).on('click', '.billing_data', function()  
            var OBGyneID = $(this).attr("id");  
            var newID = new Date().getUTCMilliseconds();
            var billing_id = newID;
            $.ajax(  
                    url:"php/billing_fetch.php",  
                    method:"GET",  
                    data:OBGyneID: OBGyneID,  
                    dataType:"json",  
                    success:function(data)
                        $('#AssessMentEntryID').val(data.AssessMentEntryID); 
                        $('#ExamDesc').val(data.ExamDesc);  
                        $('#Price').val(data.Price);  

                        $('#pxservice').val(data.pxservice);
                        $('#companyname').val(data.companyname);
                        $('#chiefcomplain').val(data.chiefcomplain);

                        document.getElementById("OBGyneID").value = OBGyneID;
                        document.getElementById("AssessMentEntryID").value = billing_id;
                        document.getElementById("pxname").innerhtml = (data.fname)+" "+(data.mi)+" "+(data.lname);
                        document.getElementById("consdates").innerHTML = (data.obgyneDate);
                        $('#myModal').modal('show');
                      
            );  
        );

【参考方案1】：

每当您在计费表中添加新的 HTML 行时，您都在为 OBGyneID、AssessMentEntryID、ExamDesc 和 Price 使用相同的 ID。如果你添加了两行，DOM 将无法正常工作，因为那里有多个相同的 id。所以我建议你用类替换它并使用类名来设置值。检查以下代码：

$(document).ready(function () 
    $("#addRow").click(function () 
        $("#billingTable").append('<tr><td ><input type="text" style="width:100%;" class="OBGyneID" name="OBGyneID" ></td>'+
                    '<td ><input type="text" style="width:100%;" class="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                    '<td ><input type="text" style="width:100%;" class="ExamDesc" type="text" name="ExamDesc"></td>'+
                    '<td ><input type="text" style="width:100%;" class="Price" type="text" name="Price"></td></tr>');

        jQuery(".ExamDesc").autocomplete(
            source: 'php/billingentry.php'
        ); 
    );
);

您已经添加了 HTML 代码，然后您可以找到 billingTable 的最后一行并可以在其中设置值。检查以下代码：

$(document).on('click', '.billing_data', function()  
    var OBGyneID = $(this).attr("id");  
    var newID = new Date().getUTCMilliseconds();
    var billing_id = newID;
    $.ajax(  
        url:"php/billing_fetch.php",  
        method:"GET",  
        data:OBGyneID: OBGyneID,  
        dataType:"json",  
        success:function(data)

            $("#billingTable").find(".AssessMentEntryID:last").val(data.AssessMentEntryID);
            $("#billingTable").find(".ExamDesc:last").val(data.ExamDesc);
            $("#Price").find(".Price:last").val(data.Price);
            $("#billingTable").find(".consdates:last").html(data.obgyneDate);
            //and so on
            $('#myModal').modal('show');
          
    );  
);

另外，我建议您使用 HTMl 模板标签为行进行克隆。不推荐在 JS 中附加 HTML。希望它可以帮助你。

【讨论】：

感谢您的回复，非常感谢。我尝试复制您的代码，但没有任何效果。每当我添加新行时，“OBGyneID”和“billing_id”的值都不会反​​映在表中。

您能否创建一个完整代码的小提琴或钢笔，以便我们更好地检查？正如我现在所看到的，您只是在 addrow 按钮单击时添加空白行。您正在通过 ajax 调用设置值 billing_data 类单击。不确定您的要求。

我删除了一些不适用的代码，这里是小提琴：jsfiddle.net/mjelid2011/q2sc7gL9/101 但它不起作用。也许我缺少一些插件。请检查，谢谢。