堆栈内存溢出
  繁体   English   中英

通过Javascript添加行后指定ul li结构

[英]Specify ul li structure after adding rows via Javascript

 原文  2016-02-27 13:23:15  3   1    javascript/ php/ jquery/ html/ css

问题描述

有一个下拉列表，从列表中选择任何值后，它应该添加新行，如：

下拉列表

现在我有：

使用Javascript 

  $.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);


    $(this).change(function() {
            option.holderObject=$(this);

      if (option.clearOnChange) {
        $(option.actionId).empty();
      }
      var val = $(this).val();
      if ($.fn.optionTest.isArray(val)) {
        $.fn.optionTest.parseArray(val, option);
      } else {
                var label =$(this).children("option:selected").eq(0).text();
        $.fn.optionTest.parseContent(val, option, label);
      }

      $('.' + option.removeLinkOptions.class).click(function(event) {
        $.fn.optionTest.removeRow(this, option);
        event.preventDefault();

      });


    $( "[type=date]" ).datepicker({
      monthNamesShort: $.datepicker.regional["en"].monthNames,
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd'
    });
      return this;
    });
  };
  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
      class: 'field-style field-split25 align-left'
    },
    rowOptions: {
      id: 'option',
      class: 'endorsements',
      tag: 'ul'

    },
    STCWCodeOptions: {
      id: 'STCWCode',
      name: 'STCWCode',
      type: 'text',
      placeholder: 'STCW Code',
      size: 20,
      class: 'field-style field-split25 align-left'
    },
    CertNoOptions: {
      id: 'CertNo',
      name: 'CertNo',
      type: 'text',
      placeholder: 'Cert No.',
      size: 20,
      class: 'field-style field-split25 align-left'
    },
    PlaceofIssueOptions: {
      id: 'PlaceofIssue',
      name: 'PlaceofIssue',
      type: 'text',
      placeholder: 'Place of Issue',
      size: 20,
      class: 'field-style field-split25 align-left'
    },
    fromOptions: {
      id: 'from',
      name: 'from',
      type: 'date',
      placeholder: 'Date of Issue',
      size: 20,
      class: 'field-style field-split25 align-left'
    },
    toOptions: {
      id: 'to',
      name: 'to',
      type: 'date',
      placeholder: 'Date of Expire',
      size: 20,
      class: 'field-style field-split25 align-left'
    },
    labelOptions: {
      class: 'field-style field-split25 align-left'
    },
    removeLinkOptions: {
      class: 'removeRow',
      href: 'javascript:;'
    }
  };
  $.fn.optionTest.parseArray = function(vals, options) {
  var selectedOptions = options.holderObject.children("option:selected");
  console.log(selectedOptions.eq(0).html());
    $.each(vals, function(key, val) {
      $.fn.optionTest.parseContent(val, options,selectedOptions.eq(key).text());
    });
  };
  $.fn.optionTest.removeRow = function(elem, options) {
    var row = $(elem).parent().closest(options.rowOptions.tag);
    row.remove();
    $.fn.optionTest.updateRowIndex(options);
  };

$.fn.optionTest.updateRowIndex = function(options) {
    $("." + options.rowOptions.class).each(function(key,value) {
      var index = key+1;
      $(value).attr('rowdataid',index);
      $(value).children("."+options.indexOptions.class).html(index);
    });
  };

  $.fn.optionTest.createColumn = function(content) {
    var li = $('<li>');
    return li.append(content);
  }
  $.fn.optionTest.parseContent = function(val, options ,label) {

    var index = $('.' +    options.rowOptions.class).length+1;    


    var rowData = $.extend({}, options.rowOptions);
    var indexData = $.extend({}, options.indexOptions);

    rowData.rowDataId = index;    
    rowData.id = rowData.id + '-' + val;

    var STCWCodeData = $.extend({}, options.STCWCodeOptions);
    STCWCodeData.name = STCWCodeData.name + '-' + val;
    STCWCodeData.id = STCWCodeData.id + '-' + val;

    var CertNoData = $.extend({}, options.CertNoOptions);
    CertNoData.name = CertNoData.name + '-' + val;
    CertNoData.id = CertNoData.id + '-' + val;

    var PlaceofIssueData = $.extend({}, options.PlaceofIssueOptions);
    PlaceofIssueData.name = PlaceofIssueData.name + '-' + val;
    PlaceofIssueData.id = PlaceofIssueData.id + '-' + val;

    var DateofIssueData = $.extend({}, options.DateofIssueOptions);
    DateofIssueData.name = DateofIssueData.name + '-' + val;
    DateofIssueData.id = DateofIssueData.id + '-' + val;

    var DateofExpireData = $.extend({}, options.DateofExpireOptions);
    DateofExpireData.name = DateofExpireData.name + '-' + val;
    DateofExpireData.id = DateofExpireData.id + '-' + val;

    var fromData = $.extend({}, options.fromOptions);
    fromData.name = fromData.name + '-' + val;
    fromData.id = fromData.id + '-' + val;

    var toData = $.extend({}, options.toOptions);
    toData.name = toData.name + '-' + val;
    toData.id = toData.id + '-' + val;

    var labelData = $.extend({}, options.labelOptions);

    if ($('#' + rowData.id).length == 0) {
      var tag = "<" + rowData.tag + ">";
      delete rowData['tag'];
      var row = $(tag, rowData);      
      var id = $('<li>', indexData).html(index);  
      var label=$('<li>', labelData).html(label);
      var STCWCode = $.fn.optionTest.createColumn($("<input>", STCWCodeData));
      var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData));
      var PlaceofIssue = $.fn.optionTest.createColumn($("<input>", PlaceofIssueData));
      var DateofIssue = $.fn.optionTest.createColumn($("<input>", DateofIssueData));
      var DateofExpire = $.fn.optionTest.createColumn($("<input>", DateofExpireData));
      var from = $.fn.optionTest.createColumn($("<input>", fromData));
      var to = $.fn.optionTest.createColumn($("<input>", toData));
      var removeRow = $.fn.optionTest.createColumn($("<img>", options.removeLinkOptions).attr("src","https://speculativenonbuddhism.files.wordpress.com/2011/05/x.jpg"));
      row.append(label).append(STCWCode).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);

      $(options.actionId).append(row);
    }
  };
/*});*/
//Running The Plugin 
/**
Here is the Options
{
    clearOnChange:false  , 
    actionId:'#action',
    rowOptions:{
    id:'option', 
    class:'personal-details3'
  },
  STCWCodeOptions: {
      id: 'STCWCode',
      name: 'STCWCode',
      type: 'text',
      placeholder: 'STCW Code',
      size: 20,
      class: 'personal-details3'
    },
    CertNoOptions: {
      id: 'CertNo',
      name: 'CertNo',
      type: 'text',
      placeholder: 'Cert No.',
      size: 20,
      class: 'personal-details3'
    },
    PlaceofIssueOptions: {
      id: 'PlaceofIssue',
      name: 'PlaceofIssue',
      type: 'text',
      placeholder: 'Place of Issue',
      size: 20,
      class: 'personal-details3'
    },
    fromOptions:{
    id:'from',
    name:'from',
    type:'date', 
    placeholder:'Date of Issue', 
    size:20,
    class: 'personal-details3'
  }, 
  toOptions:{
    id:'to',
    name:'to',
    type:'date', 
    placeholder:'Date of Expire', 
    size:20,
    class: 'personal-details3'  
  }
};
**/
$(document).ready(function() {
  $('select').optionTest({
    actionId: '#action2',
    clearOnChange: false
  });
});

HTML 

<fieldset class="fieldset-borders">
<legend>4. Licenses & Certificates</legend>
<ul class="header"> 
<li>
  <select id='options' class="field-style div-format align-left">
    <option selected disabled value="0">Select certificates</option>
    <option value="1">PSSR</option>
    <option value="2">Adv. F.F.</option>
    <option value="3">Survival</option>
    <option value="4">HAZMAT</option>
    <option value="5">First Aid</option>
    <option value="6">Med. Care</option>
    <option value="7">SSO</option>
    <option value="8">GMDSS</option>
    <option value="9">Rad. Obs.</option>
    <option value="10">ARPA</option>
    <option value="11">ECDIS</option>
    <option value="12">BT&RM</option>
    <option value="13">Oil. Tank.</option>
    <option value="14">Ch. Tank.</option>
    <option value="15">LPG</option>
    <option value="16">LNG</option> 
  </select>  
</li>
</ul>  
<ul class="endorsements" id="personal-details3">        
    <li>
        <ul class="column">         
            <li><p class="test-label11">Name</p></li>                       
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li><p class="test-label11">STCW Code</p></li>                      
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li><p class="test-label11">Cert. No</p></li>                       
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li><p class="test-label11">Place of Issue</p></li>                     
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li><p class="test-label11">Date of Issue</p></li>                      
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li><p class="test-label11">Date of Expire</p></li>                     
        </ul>
    </li>
</ul>

<div class="endorsements" id="action2"> 

</div>
</fieldset>

现在它产生如下结构： 

<div>
   <ul>
      <li>
         <input></input>  
      </li>
      <li>
         <input></input>  
      </li>
      <li>
         <input></input>  
      </li>
      <li>
         <input></input>  
      </li>
      <li>
         <input></input>  
      </li>
      <li>
         <input></input>  
      </li>
   </ul>
</div>

但是我需要这样的东西： 

<ul class="endorsements" id="personal-details3">
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>   
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>
   <li>
      <ul class="column">
         <li><input></input></li> 
      </ul>
   </li>
</ul>

如你所见，这个结构是通过Javascript而不是HTML创建的，所以我无法想象成功。

我试图替换这个： 

var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData));

喜欢： 

var CertNo = $.fn.optionTest.createColumn($("<ul><li><input>", CertNoData));

但在这种情况下，我得到了空文本字段，没有（ placeholder ， id ， name ..etc）。

我创建了JS FIDDLE 。 认证部分是通过HTML生成的，例如它应该是什么样子，应该修改许可证和证书字段（尝试从下拉列表中选择任何值来生成字段）。

1 个解决方案

解决方案1
 2 已采纳  2016-02-27 14:26:43

更新小提琴

您可以添加两个变量： 

var start_by = "<li><ul class='column'><li>";
var end_by = "</li></ul></li>";

将它添加到每个字段，如下所示： 

var STCWCode = $.fn.optionTest.createColumn($("<input>", STCWCodeData));
STCWCode = $(start_by+$(STCWCode).html()+end_by);

完整代码如下所示： 

var STCWCode = $.fn.optionTest.createColumn($("<input>", STCWCodeData));
STCWCode = $(start_by+$(STCWCode).html()+end_by);

var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData));
CertNo = $(start_by+$(CertNo).html()+end_by);

var PlaceofIssue = $.fn.optionTest.createColumn($("<input>", PlaceofIssueData));
PlaceofIssue = $(start_by+$(PlaceofIssue).html()+end_by);

var DateofIssue = $.fn.optionTest.createColumn($("<input>", DateofIssueData));
DateofIssue = $(start_by+$(DateofIssue).html()+end_by);

var DateofExpire = $.fn.optionTest.createColumn($("<input>", DateofExpireData));
DateofExpire = $(start_by+$(DateofExpire).html()+end_by);

var from = $.fn.optionTest.createColumn($("<input>", fromData));
from = $(start_by+$(from).html()+end_by);

var to = $.fn.optionTest.createColumn($("<input>", toData));
to = $(start_by+$(to).html()+end_by);

var removeRow = $.fn.optionTest.createColumn($("<img>", options.removeLinkOptions).attr("src",""));
removeRow = $(start_by+$(removeRow).html()+end_by);

要使用新DOM调整删除操作，它应该使用class .endorsements定位父ul： 

$.fn.optionTest.removeRow = function(elem, options) {
    var row = $(elem).closest(".endorsements");
    row.remove();
    $.fn.optionTest.updateRowIndex(options);
};

要使新行垂直，您可以添加以下CSS规则： 

#action2 > ul{
    display: block;
    width: 100%;
}

#action2 > ul > li{
    width: 16.66%;
    display: inline-block;
}

#action2{
  display: block;
}

希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 添加一个 <li> 到一个 <ul> -javascript中的对象 通过JavaScript向左ul li滑动 添加问题 <li> 成 <ul> 来自javascript 添加新的麻烦<li>到<ul>使用 javascript 进行点击 JavaScript中的ul添加多个li 在每第二个<li>之后使用角度ngRepeat添加<ul> </ ul> 如何将HTML ul-li结构保存到javascript对象中 向ul添加li jQuery通过php将新行追加到ul li 试图通过 Javascript 添加假点击 ul li 项目
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM