0

私は高低を検索しましたが、私がやろうとしていることの解決策を見つけることができませんでした.

次のようなコードを使用して、動的行を追加し、要素 ID で実行しています。

  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = '';
  el.name = 'description' + iteration;
  el.id = 'description' + iteration;
  el.size = 55;
  cellRight.appendChild(el);

テキスト リンクを追加したいフィールドが 1 つあり、新しいサイズのウィンドウを開きます。基本的に、ポップアップ。私が見つけたさまざまなコード スニペットを試してみましたが、どれもそれを行っていません。私が最も近いのは、フルページの新しいタブです。

  var cellRight = row.insertCell(3);
  var el = document.createElement("td"); 
  var cell=document.createElement('td');
  var link=document.createElement('a');
  link.setAttribute('href','http://www.domain.com/page.php');
  link.setAttribute('target','_blank');
  link.setAttribute('height','400');
  link.setAttribute('width','500');
  link.appendChild(document.createTextNode('Page'));
  cell.appendChild(link);
  el.appendChild(cell);
  cellRight.appendChild(el);

私も次のようなことを試しました：

link.onclick(window.open('http://www.domain.com/page.php','popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

と

el.html('<a href="JavaScript:newPopup(\'http://www.domain.com/page.php\');">Page</a>');

このコードを使用して通常の JavaScript で動作させることができますが、これを入力の最初の「行」で使用し、要素 ID を使用して後続の動的行を作成します。

<script type="text/javascript">
    function newPopup(url) {
    popupWindow = window.open(
url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="JavaScript:newPopup('http://www.domain.com/page.php');">Page</a></td>

リンク、またはこの作業を支援するために誰かが提供できる例があることを願っています。

よろしくお願いします。

4

1 に答える 1

3

必要なものを達成するための適切な方法は、event delegationです。つまり、イベント ハンドラーを親要素 ( など<body>) に割り当て、内部のイベント ターゲットを確認します。

たとえば、次の HTML があるとします。

<div id="container">
  <a href="http://www.domain.com/page.php">Page 1</a>
  <a href="http://www.domain.com/page2.php">Page 2</a>
</div>

<button id="addBtn">Add a new link</button>

すべてのリンクには、hrefポップアップ ウィンドウに使用される適切な属性があることに注意してください。また、Javascript が無効になっている場合のフォールバックとしても機能します。

そして、（簡略化 — 要素のタイプも href プロパティの存在もチェックしません）スクリプトは次のようになります。

var container = document.getElementById('container');

container.addEventListener('click', function (e) {
   if (e.preventDefault) {
     e.preventDefault();
   } else {
     e.returnValue = false; // For IE
   }

   var target = e.target;
   var popupWindow = window.open(target.href,'popUpWindow',
       'height=400,
       width=500,
       left=10,
       top=10,
       resizable=yes,
       scrollbars=yes,
       toolbar=yes,
       menubar=no,
       location=no,
       directories=no,
       status=yes'
   );  
});

// The following code creates links dynamically upon clicking the button
document.getElementById('addBtn').addEventListener('click', function (e) {
    var index = container.getElementsByTagName('a').length + 1;
    var newLink = '<a href="http://www.domain.com/page' + index +'.php">Page ' + index +'</a>';

    container.innerHTML += newLink;
});

http://jsfiddle.net/C53cd/3/の例を参照してください。FF16 と Chrome で動作します。IE でイベント バインディングを機能させるには、単純なポリフィルを実装する必要があるかもしれないことに注意してください ( Javascript の MSIE および addEventListener 問題? )。または、同じ目的で jQuery を使用することもできます。

UPD: IE のデフォルト アクション防止を追加しました。

UPD 2:新しいリンクを動的に作成するコードを追加しました。

于 2012-11-20T05:08:46.057 に答える