Question

在我的应用程序中，我可以通过单击“ +”号来添加新行。当单击“ +”号时，创建了新行，但我希望在单击“ +”号时将某些特定字段隐藏，并且满足某些条件即可显示那些隐藏的字段。创建新行时如何实现此功能？

添加新行的代码：

$("#addRow").click(function() {
    openSearchdiv = true;
    $("#searchTable").append('
<tr>
   <td>
      <select class="lovs" id="field" >
         <option value="select"></option>
         <option value="rowid_system">Source System Name</option>
         <option value="rule_num">Rule No</option>
      </select>
   </td>
   <td>
      <select class="lovs" id="operator">
         <option value="EQUAL">EQUAL</option>
         <option value="NOT EQUAL">NOT EQUAL</option>
      </select>
   </td>
   <td></td>
   <td>
      <select class="lovs" id="function">
         <option value="AND">AND</option>
      </select>
   </td>
   <td align="center"><img alt="" title="Delete" id="deleteRow" src="/MatchMergeAPI_POC/img/minus.png" style="height:15px;width:15px;"></td>
</tr>');
});

表第一次加载时，我隐藏了值下拉列表。通过单击字段名称可以看到它。因此，我希望单击“ +”号时的行为相同。目前，在添加表格行时，我只是空白。

填充下拉列表值：

$("#searchTable").on('click','#field',function(){
        //alert('hi');
        //var showSpan = false;
        var showHide = false;
        var showRule = false;
        var srcNameInd = false;
        var src=null;

        $("#searchTable tbody >tr").each(function()
                {
                    $("td > *",this).each(function() 
                        {
                            if (this.nodeName == "SELECT") {
                                if ($(this).attr("id") == "field") {

                                    field = $(this).val();

                                    if(field=="rowid_system" )
                                    {
                                        showHide=true;  

                                        console.log('rowid_system');

                                        //populate value for source name
                                        //$("#field").on('click',function(){
                                            //alert('ajax call');
                                            $.ajax({
                                                url: contextPath+"/getSourceName/ORG",
                                                datatype: "JSON",
                                                type: "Get",
                                                contentType : "application/json; charset=utf-8",
                                                success: function(data)
                                                {
                                                    srcName.populateSrcName(
                                                        data,
                                                        $('#srcName')

                                                    );
                                                }                                         

                                            });

Answer 1

您可以隐藏添加行后添加到表中的最后一行的选择，例如：

$("#searchTable tr:last select").hide();

或者您可以在添加时添加内联样式，例如：

$("#searchTable").append('<tr><td><select style="display:none" class="lovs" id="fi...');

您还可以添加一个隐藏该字段的类，然后在想要再次显示它时将其删除：

.hide{
     display: none;
}

$("#searchTable").append('<tr><td><select class="lovs hide" id="fi...');

并尝试在单击上使用事件委托：

$('body').on('click', '#addRow', function() {
    //Your flow here
});

在JQuery中添加新行时隐藏下拉菜单

1 个答案: