錯誤|刪除SelectElement上的不允許的屬性

我試圖使用按鈕來添加一個新的行在html表中，當點擊按鈕時，另一個按鈕來刪除其複選框被選中的行/ s。我經歷了兩個問題：錯誤|刪除SelectElement上的不允許的屬性

每當附加按鈕被點擊我得到Removing disallowed attribute SELECT on-change="{{ onChangeTypeFired }}"
如果我選擇兩個複選框並單擊刪除行按鈕，它拋出一個indexIndexSizeError：索引或大小爲負，或大於允許的值。提供的索引（2）大於表（2）中的行數。

的文件顯示如下

的.html

 <!DOCTYPE html> 

     <link rel='import' href='../../../../packages/polymer/polymer.html' > 

     <link rel='import' href='../../../../packages/paper_elements/paper_checkbox.html' > 
     <link rel='import' href='../../../../packages/paper_elements/paper_button.html' > 
     <link rel='import' href='../../../../packages/core_elements/core_collapse.html' > 
     <link rel='import' href='../../../../packages/core_elements/communication_icons.html' > 

     <polymer-element name='phone-form'> 
      <template> 

      <div 
       class='parent-container'> 
       <paper-button id='add-btn' on-click='{{toggle}}'> 
       <core-icon id='toggle-btn-icon' icon=''></core-icon> 
       Phone 
       <core-icon id='validation-icon' class='margin-l5px' icon=''></core-icon> 
       </paper-button> 



      <table id='table' border='1' width='350px'> 
       <tbody><tr> 
        <td><input name='chk' type='checkbox'></td> 
        <td> 
         <select id='phoneType' class='width95percent' 
          selectedIndex='{{typeSelected}}' 
          on-change='{{onChangeTypeFired}}'> 
          <option template repeat='{{key in types.keys}}' 
          value='{{types[key]}}'>{{types[key]}} 
         </option> 

         </select> 
        </td> 
       </tr> 
      </tbody></table> 
      </div> 
      <div> 
       <paper-button raised id='add-row-btn' class='margin-8px' 

       on-click='{{addRow}}'> 
       Add Row 
       <core-icon id='add-row-btn-icon' icon='check-all'></core-icon> 
       </paper-button> 

       <paper-button raised id='delete-row-btn' class='margin-8px' 

       on-click='{{deleteRow}}'> 
       Delete Selected Row(s) 
       <core-icon id='delete-row-btn-icon' icon='check'></core-icon> 
       </paper-button> 

      </div> 



      </div> 
      </template> 
      <script type='application/dart' src='phone_form.dart'></script> 
     </polymer-element>

.dart

import 'package:polymer/polymer.dart'; 
import 'dart:html' as dom; 

import 'package:paper_elements/paper_button.dart' show PaperButton; 
import 'package:core_elements/core_collapse.dart'; 

//import 'package:epimss_shared/epimss_shared.dart'; 
//import 'package:epimss_shared/epimss_shared_client.dart' hide DataEvent; 

@CustomTag('phone-form') 
class PhoneForm extends PolymerElement { 

    @observable String errorMsg; 
    String topic; 
    PaperButton addBtn; 

    int typeSelected = 0; 
    CoreCollapse coreCollapse; 

    @observable 
    Map<String, String> types = <String, String> { 
    '': '', 
    'Car': 'Car', 
    'Direct': 'Direct', 
    'Fax': 'Fax', 
    'Home': 'Home', 
    'Mobile': 'Mobile', 
    'Video': 'Video', 
    'Work': 'Work' 
    }; 

    PhoneForm.created() : super.created(); 


void toggleCoreCollapse() { 
    coreCollapse.toggle(); 
} 

    void onSelectTypeFired() 
    { 

    } 

    void onChangeTypeFired(dom.Event e, var detail, dom.SelectElement target) 
    { 
    print(target.value); 
    } 

    void addRow() 
    { 
    var table = $['table']; 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 

    for(var i = 0; i<colCount; i++) 
    { 
     var newcell = row.insertCell(i); 
     newcell.innerHtml = table.rows[0].cells[i].innerHtml; 

     switch(newcell.childNodes[0].runtimeType.toString()) 
     { 
     case 'text': 
      newcell.childNodes[0].value = ''; 
      break; 

     case 'checkbox': 
      newcell.childNodes[0].checked = false; 
      break; 

     case 'select': 
      newcell.childNodes[0].selectedIndex = 0; 
      break; 
     } 
    } 
    } 


    void deleteRow() 
    { 

    var rowsToDelete = []; 

    try{ 
     var table = $['table']; 
     var rowCount = table.rows.length; 

     for(var i = 0; i < rowCount; i++) 
     { 
     var row = table.rows[i]; 
     var chkbox = row.cells[0].childNodes[0]; 

     if(chkbox != null && chkbox.checked) 
     { 
      if(rowCount <= 1) 
      { 
      print('Cannot delete all the rows.'); 
      break; 
      } 
      else 
      { 
      rowsToDelete.add(i); 
      } 
     } 
     } 

     rowsToDelete.forEach((row) 
      { 
      table.deleteRow(row); 
      }); 
    } 
    catch(e) 
    { print(e); } 
    } 


    @override 
    void attached() { 
    super.attached(); 
    topic = this.dataset['topic']; 

    coreCollapse = $['core-collapse']; 

    addBtn = $['add-btn']; 
    } 



}

感謝您的幫助。

來源

2015-02-07 st_clair_clarke

這可能是由於該行

newcell.innerHtml = table.rows[0].cells[i].innerHtml;

你需要指定哪些元素和標籤允許從一個字符串添加到DOM引起的。有關更多詳細信息，請參閱https://stackoverflow.com/a/27334820/217408。

當您像new DivElement()那樣命令性地生成元素時，這不適用。

在你的榜樣它可能會更容易，更好地做到像

newcell.children.clear(); 
newcell.children.addAll(table.rows[0].cells[i].children.map((c) => 
    c.clone(true)));

注意：我不知道如何代碼應完全像，但我認爲你的想法。如果您無法解決問題，請添加評論，然後仔細查看。

來源

2015-02-07 17:50:21

嗨Gunter。我在這一天度過了美好的一天，並且遇到了不同類型的問題。請仔細看看，謝謝。 – 2015-02-08 00:52:23

我滑雪:)今天晚些時候我會看看。 – 2015-02-08 11:11:06

我更新了代碼。我很確定它現在是正確的。 – 2015-02-09 07:28:34

錯誤|刪除SelectElement上的不允許的屬性

回答

相關問題