2

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

我的目标是附加分钟。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 中 :( 这可能是错误，但我不确定！

4

1 回答 1

0

在这种情况下，Internet Explorer 正在防止将<tr>元素直接无效嵌套在<table>元素中。为了附加 tr，您需要将其附加到 a<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);

tbodyjQuery 将在必要时自动进行包装。

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

$('#tbl_produktinfo input[type=text]').each(function() {
   mapArray.push(this.id + ';' + this.value);
});
于 2012-10-22T13:27:54.073 回答