javascript - JQuery:将新单元格附加到表格并循环遍历它们在 FF、Chrome 中有效，但在 IE 中无效

Question

在以下情况下我遇到了一些麻烦:

我的目标是追加最小值。 2 在表中输入字段。在下一步中，它应该能够遍历新生成的单元格以从新生成的字段中获取值。

代码如下:

调用添加新部分(1.输入字段)

<a href="javascript:;" onclick="addAbschnittElement();">
<spring:message code="newSection"/></a>

JS:附加新字段

function addAbschnittElement() {
var ni = document.getElementById('tbl_produktinfo');
var numi = document.getElementById('val');
var num = (document.getElementById('val').value -1)+ 2;
numi.value = num;

var newTr = document.createElement('tr');
var newTrIdName = 'tr_abschnitt_'+num;
var newTdIdName = 'td_abschnitt_'+num;
var newDivIdName = 'div_abschnitt_'+num;
var hiddenValueName = 'hv_'+newTrIdName;
newTr.setAttribute('id',newTrIdName);
newTr.innerHTML = '<td id="' + newTdIdName + '"><div id="'+newDivIdName+'"><input        id="a'+num+'z0" style="width:500px;" ></input><a href=\'#\' onclick=\'removeAbschnitt("' +newTdIdName + '","'+newDivIdName+'")\'>Abschnitt löschen</a> <input type="hidden" value="0" id="'+ hiddenValueName +'" /></div></td>';
ni.appendChild(newTr);

var li = document.getElementById('div_abschnitt_'+num);
var linediv = document.createElement("div");
var lineDivIdName = 'div_line_'+num;
linediv.setAttribute('id',lineDivIdName);
linediv.innerHTML = '<input id="a'+num+'z1" style="width:350px;"></input> <a href=\'#\' onclick=\'addZeile("'+num+'","'+lineDivIdName+'","'+hiddenValueName+'")\'>Zeile hinzufügen</a><br>';
li.appendChild(linediv); 

}

最后，这个函数将被调用:

function submitForm() {
var mapArray = [];
jQuery.ajaxSettings.traditional = true;

var infoCells = $('#tbl_produktinfo').find('tr').find('td');

infoCells.each(function(){
    $(this).each(function(){
        $(this).children().each(function()
        {
            $(this).children().each(function(){
                if (this.localName == "input" && this.type == "text")
                {
                    mapArray.push(this.id + ";" + $(this).val());
                }
                if (this.localName == "div") {
                    $(this).children().each(function()
                    {
                        if (this.localName == "input" && this.type == "text") {
                            mapArray.push(this.id + ";" + $(this).val());
                        }
                    });
                }
            });
        });
    });
}); 

//在这个地方一个 AJAX 调用将 mapArray 传输到服务器

线

var infoCells = $('#tbl_produktinfo').find('tr').find('td');

返回一个空对象!因此 mayarray 永远不会填充一些输入...

我的错误在哪里？

附加信息:FF 中的 Firebug 告诉我，DOM 在添加一些部分后更新了!但在 IE 中没有 :( 这可能是 Bug，但我不确定!

Answer 1

在这种情况下，Internet Explorer 正在防止 <tr> 的无效嵌套直接在 <table> 中的元素元素。为了追加 tr，您需要将其追加到 <tbody>。或 <thead> .例如:

var ni = document.getElementById('tbl_produktinfo');
var tbody = ni.getElementsByTagName('tbody')[0];

if(!tbody) {
  tbody = ni.appendChild(document.createElement('tbody'));
}

// rest of your code

tbody.appendChild(newTr);

因为您有可用的 jQuery，您也可以使用 if 进行 DOM 操作，并将追加行切换为:

$(ni).append(newTr);

jQuery 会自动执行 tbody必要时包装。

submitForm也可以通过使用 CSS 选择器挑选表格中的输入字段来大大简化:

$('#tbl_produktinfo input[type=text]').each(function() {
   mapArray.push(this.id + ';' + this.value);
});