1

以下は、テキスト フィールドの新しい行を作成するコードです。たとえば、行に 4 つのテキスト フィールドが指定されている場合、[追加] ボタンをクリックすると、上記と同じように追加の行が作成されます。

次のコードは IE でのみ機能し、他のブラウザーでは機能しません。

var delName = "ID=oth4del";
var t = oth4;
t.str = "\r\n      <td><table class=\"query\" width=\"100%\">\r\n          <tr>\r\n            <td><input type=\"text\" name=\"q269r1491i~\" size=\"22\" maxlength=\"50\">\r\n            </td>\r\n            <td><input type=\"text\" name=\"q270r1447i~\" size=\"22\" maxlength=\"50\">\r\n            </td>\r\n            <td><input type=\"text\" name=\"q2765r6758i~\" size=\"22\" maxlength=\"50\">\r\n              </font></td>\r\n          </tr>\r\n        </table></td>\r\n      ";
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>';
t.cnt = 1;
document.multis.push(t);

私が得るエラーはこれです：

TypeError: m.lastChild.insertAdjacentHTML は関数ではありません [このエラーで中断]

m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));

追加ボタンのコード:

次の関数が呼び出されます。

<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add"
></td></tr></table>


document.multis = new Array();

function findparent(e,tn) {
  while(e && e.parentNode && e.tagName && e.tagName.toLowerCase()!=tn) e = e.parentNode;
  return e;
}

function addrow(b) 
{
  var m = findparent(b,"div");  
  m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));    
 }
///////////////////////////////////DEL ROW
function delrow(b)
{
  var table = findparent(b,"table");
  //var t = findparent(b,"div");
  //alert(t.cnt);
  //alert(table.cnt);
  table.parentNode.removeChild(table);  
}

キャッチされていない TypeError: オブジェクト # にはメソッド 'insertAdjacentHTML' がありません

また、Chromeで再度確認したところ、次のエラーが発生しました：addRowが呼び出されたとき

HTML 生成コード:

<DIV ID="Div_Insurance" >
        <SPAN id="INSURANCE" style="display:inline;">


<div ID="insurance1"
 >


<table border="1%" align="center" width="100%" style="display:none"><tr>
      <td><table class="query" width="100%">
          <tr>
            <td >Type</td>
            <td><select name="q2485i~">
                <option value="5581">Pharmaceutical</option>
                <option value="5582" selected>Long Term Care</option>
                <option value="5583">Home Care</option>
                <option value="5584">Other</option>
              </select>
            </td>
            <td>Other</td>
            <td><input type="text" name="q2764r6757i~" placeholder="Other Infomation" size="22" maxlength="50"></td>
          </tr>
          <tr>
            <td>Name of Insurance</td>
            <td><input type="text" name="q2438r5533i~" placeholder="Insurance Name" size="22" maxlength="50">
            </td>
            <td>Contact Person</td>
            <td><input type="text" name="q2439r5534i~" placeholder="Contact Person" size="22" maxlength="50">
            </td>
          </tr>
          <tr>
            <td>Address</td>
            <td><textarea cols="20" rows="4"  maxlength="50" name="q2440r5535i~" placeholder="Address"></textarea>
            </td>
            <td>Phone</td>
            <td><input type="text" name="q2441r5536i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX">
            </td>
          </tr>
          <tr>
            <td>Fax</td>
            <td><input type="text" name="q2442r5537i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX">
            </td>
            <td>Email</td>
            <td><input type="text" name="q2443r5538i~" size="22" maxlength="50" placeholder="xyz@xyz.xyz">
            </td>
          </tr>
        </table></td>
      </tr></table>

<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add"
></td></tr></table>

</div>

<script>
var delName = "ID=insurance1del";
var t = insurance1;
t.str = "\r\n      <td><table class=\"query\" width=\"100%\">\r\n          <tr>\r\n            <td >Type</td>\r\n            <td><select name=\"q2485i~\">\r\n                <option value=\"5581\">Pharmaceutical</option>\r\n                <option value=\"5582\" selected>Long Term Care</option>\r\n                <option value=\"5583\">Home Care</option>\r\n                <option value=\"5584\">Other</option>\r\n              </select>\r\n            </td>\r\n            <td>Other</td>\r\n            <td><input type=\"text\" name=\"q2764r6757i~\" placeholder=\"Other Infomation\" size=\"22\" maxlength=\"50\"></td>\r\n          </tr>\r\n          <tr>\r\n            <td>Name of Insurance</td>\r\n            <td><input type=\"text\" name=\"q2438r5533i~\" placeholder=\"Insurance Name\" size=\"22\" maxlength=\"50\">\r\n            </td>\r\n            <td>Contact Person</td>\r\n            <td><input type=\"text\" name=\"q2439r5534i~\" placeholder=\"Contact Person\" size=\"22\" maxlength=\"50\">\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td>Address</td>\r\n            <td><textarea cols=\"20\" rows=\"4\"  maxlength=\"50\" name=\"q2440r5535i~\" placeholder=\"Address\"></textarea>\r\n            </td>\r\n            <td>Phone</td>\r\n            <td><input type=\"text\" name=\"q2441r5536i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td>Fax</td>\r\n            <td><input type=\"text\" name=\"q2442r5537i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n            </td>\r\n            <td>Email</td>\r\n            <td><input type=\"text\" name=\"q2443r5538i~\" size=\"22\" maxlength=\"50\" placeholder=\"xyz@xyz.xyz\">\r\n            </td>\r\n          </tr>\r\n        </table></td>\r\n      ";
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>';
t.cnt = 1;
document.multis.push(t);
</script>


      </SPAN>
      </DIV>
4

1 に答える 1

2

addrow()関数で aを実行してconsole.log(m.lastChild)、それが何であるかを確認します 。

そのを確認してくださいnodeType。テキスト ノード (つまり、nodeType = 3) であると思われます。

これは要素ノードではなくテキスト ノードなので、もちろんメソッドはありませんinsertAdjacentHTML。

参考文献:

これは、残しておきたい古典的で昔ながらのスニペットです。lastChild (またはその他のフレーバー) を取得したら、Element Nodeで作業していることを確認してください。

function addrow(b) {
    var m = findparent(b,"div"),
        lastChildElement = m.lastChild;

    // the old-school routine
    while (lastChildElement && lastChildElement.nodeType !== 1) {
        lastChildElement = lastChildElement.previousSibling;
    }

    if (lastChildElement) {
        lastChildElement.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));    
    } else {
        // handle this case...
    }
}

すでにお察しのとおり、反対側には と が含まfirstChildれnextSiblingます。

于 2013-04-30T11:08:55.463 に答える