想要使用js添加行onclick

Want to use js to add rows onclick

本文关键字：添加行 onclick js      更新时间：2023-09-26

我下面有一个代码，它从Visa网站上提取外汇数据。每次点击一个日期，它都会添加另一行。

但是添加一行似乎会导致所有iframe的重新加载/刷新。。。为什么？我该如何防止这种情况发生？

（你可以在http://zinclabs.com/eur2)

<body>
<script>
var date = new Date();
function format(date) {
    var mm = date.getUTCMonth() + 1;
    var dd = date.getUTCDate();
    var yy = date.getUTCFullYear();
    return mm + '/' + dd + '/' + yy;
}
function addrow(){
    var d = format(date);
    document.body.innerHTML +='<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
    date.setDate(date.getDate() - 1);
}
addrow();
</script>
</body>

将文本添加到对象的innerHTML会导致对象的完全刷新–在这种情况下为CCD_ 2。因此，将重新加载其中的所有iframe。

相反，您可以创建一个新的DIV元素，并将其附加为document.body:的子元素

function addrow(){
  var d = format(date);
  var newRow= document.createElement('div');
  newRow.innerHTML= '<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
  document.body.appendChild(newRow);
  date.setDate(date.getDate() - 1);
}
相关文章：