Question

我在循环中生成一个数据表。每行都有自己的按钮。

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        function liste() {
            var request = new XMLHttpRequest();
            request.addEventListener('load', function(data) {
                var site = JSON.parse(data.target.responseText);
                var new_html = '';
                    new_html += '<table class="table table-responsive">';
                    new_html += '<thead>';
                    new_html +='<tr>';
                    new_html +='<th>delete</th>';
                    new_html +='<th>id</th>';
                    new_html +='<th>lieu</th>';
                    new_html +='<th>type</th>';
                    new_html +='<th>latitude</th>';
                    new_html +='<th>longitude</th>';
                    new_html +='<th>tarif</th>';
                    new_html +='<th>date</th>';
                    new_html +='<th>photo</th>';
                    new_html +='<th>prenom</th>';
                    new_html +='<th>nom</th>';
                    new_html +='<th>commentaire</th>';
                    new_html +='</tr>';
                    new_html +='</thead>';
                    new_html +='<tbody>';
                    for (var i1 in site){
                    new_html +='<tr id="row"'+i1+'>';
                    new_html +='<td>';
                    new_html +='<button id="delete" class="btn btn-success topbuttons">DELETE</button>';
                    new_html +='</td>';
                    for (i2 in site[i1]){
                    new_html +='<td>';
                    if(i2 == 'photo'){
                    new_html += '<img src="'+site[i1][i2]+'" width="300" height="200">';
                    }else{
                    new_html += site[i1][i2];
                    }
                    new_html +='</td>';
                    }
                    new_html += '</tr>';                
                    }

                document.querySelector('#resultat').innerHTML = new_html;
            });


            request.open("GET", "webservice_liste_get.php?search="+document.getElementById('search').value);
            request.send();
        }
    });
    </script>

<div id="resultat"></div>

我在为按钮编写动作侦听器时遇到问题，因此当您单击按钮时出现消息：您单击了行号$id。我怎么能这样做？

Answer 1

您无法生成多个id="delete"按钮。 id属性应该是唯一的。请改为new_html +='<button id="delete' + i1 + '" class="btn btn-success topbuttons">DELETE</button>';。

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。 http://www.w3schools.com/tags/att_global_id.asp

当你生成DOM元素时，你必须绑定事件（例如click）之后。如果这些元素是从响应的ajax请求生成的，则必须在将它们添加到DOM后绑定它们。

所以，简单的方法是使用像这样的jQuery on事件：

＆＃13;
＆＃13;
document.addEventListener('DOMContentLoaded', function () { function liste() { //var request = new XMLHttpRequest(); //request.addEventListener('load', function(data) { //var site = JSON.parse(data.target.responseText); var site = [{id:1, name: 2}, {id:1, name: 2}, {id:1, name: 2}]; var new_html = ''; new_html += '<table class="table table-responsive">'; new_html += '<thead>'; new_html +='<tr>'; new_html +='<th>delete</th>'; new_html +='<th>id</th>'; new_html +='<th>lieu</th>'; new_html +='<th>type</th>'; new_html +='<th>latitude</th>'; new_html +='<th>longitude</th>'; new_html +='<th>tarif</th>'; new_html +='<th>date</th>'; new_html +='<th>photo</th>'; new_html +='<th>prenom</th>'; new_html +='<th>nom</th>'; new_html +='<th>commentaire</th>'; new_html +='</tr>'; new_html +='</thead>'; new_html +='<tbody>'; for (var i1 in site){ console.log(i1); new_html +='<tr id="row'+i1+'">'; new_html +='<td>'; new_html +='<button id="delete" class="btn btn-success topbuttons">DELETE</button>'; new_html +='</td>'; for (i2 in site[i1]){ new_html +='<td>'; if(i2 == 'photo'){ new_html += '<img src="'+site[i1][i2]+'" width="300" height="200">'; }else{ new_html += site[i1][i2]; } new_html +='</td>'; } new_html += '</tr>'; } document.querySelector('#resultat').innerHTML = new_html; //}); //request.open("GET", location.href); //request.send(); } document.querySelector('#resultat').addEventListener('click', function(event) { var clickedEl = event.target; if(clickedEl.tagName === 'BUTTON') { alert(clickedEl.parentNode.parentNode.getAttribute('id')); } }); liste(); });
＆＃13;
<input type="search" id="search" /> <div id="resultat"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

虽然所有浏览器都会解析.innerHTML，但在JavaScript中向页面添加内容的规范方法是通过DOM方法与Node和Element对象进行交互，而不是将字符串连接在一起。

document.createElement('tagname');会创建空白元素 element.id = 'myid';设置了id属性 element.className = 'class';设置整个类属性 element.classList.add('classname');添加了一个类......

不同的元素也具有特定的属性，例如具有HTMLImageElement属性的.src。这些属性都直接映射到标记属性。

设置元素文本的旧方法是创建一个Text节点并将其附加到元素。 element.appendChild(document.createTextNode('mytext'));
现代浏览器支持简写textContent属性，允许您只执行 element.textContent = 'mytext';应该比使用必须解析的.innerHTML更清晰。

如果您开始使用这些动态创建内容，您也可以将事件绑定到它们：

function buttonClickListener(e) {
  alert('You clicked on the button with id = ' + e.currentTarget.id);
}

var button = document.createElement('button');
button.id = 'delete';
button.className = 'btn btn-success topbuttons';
button.textContent = 'DELETE';

button.addEventListener('click', buttonClickListener);

但是您不想重新启动当前代码，您可能只想从HTML中获得的代码中检索所有按钮。您可以使用querySelectorAll方法中的CSS选择器检索元素。

var resultat = document.querySelector('#resultat');
resultat.innerHTML = new_html;
// select all button elements in resultat
var buttons = resultat.querySelectorAll('button');

for(var i=0; i<buttons.length; ++i) {
  buttons[i].addEventListener('click', buttonClickListener);
}

现在我不确定您想要检测到什么以及您希望显示哪些消息，但工具在您手中：）

Answer 3

试试这个：

for (var i1 in site){

    new_html +='<tr id="row"'+i1+'>';
    new_html +='<td>';
    new_html +='<button id="delete" data-row-id="' + i1 +'" class="btn btn-success topbuttons" onclick="clickHandler(this)">DELETE</button>';
    new_html +='</td>';

...

function clickHandler(el){
    alert("You\'ve clicked on the row with number: " + el.getAttribute('data-row-id'));
}

JavaScript如何引用for生成的按钮

3 个答案: