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

Question

基本上这个请求的目标是有一个模态表，它添加新的表行/单元格并将“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" alt="">
                        <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 width="10%"><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID"></td>
                                        <td width="10%"><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>
                                        <td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>
                                        <td width="20%"><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 width="10%"><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID" ></td>'+
                            '<td width="10%"><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                            '<td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>'+
                            '<td width="20%"><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');
                    }  
            });  
        });

Answer 1

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

$(document).ready(function () {
    $("#addRow").click(function () {
        $("#billingTable").append('<tr><td width="10%"><input type="text" style="width:100%;" class="OBGyneID" name="OBGyneID" ></td>'+
                    '<td width="10%"><input type="text" style="width:100%;" class="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                    '<td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" name="ExamDesc"></td>'+
                    '<td width="20%"><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。希望它可以帮助你。