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>。<tbody>trを追加するには、またはに追加する必要があります<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を利用できるので、DOM操作にもifを使用して、追加行を次のように切り替えることができます。

$(ni).append(newTr);

jQueryは、必要に応じて自動的にtbodyラッピングを実行します。

CSSセレクターを使用してテーブルのsubmitForm入力フィールドを選択することにより、を大幅に簡略化することもできます。

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