Question

我正在尝试使用按钮在单击按钮时在html表中添加新行，并使用另一个按钮来删除行，并选中其复选框。我遇到两个问题：

每当点击添加按钮时，我都会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'];
  }



}

感谢您的帮助。

Answer 1

这可能是由这条线引起的

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)));

警告：我不确定代码应该是什么样子，但我认为你明白了。如果你不能解决它添加评论，我会仔细看看。

错误|删除SelectElement上的不允许属性

1 个答案: