![td]( "td")
本文介绍了如何使用javascript为table.wrriten的每一行中的按钮触发事件时调用方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想知道如何在不使用html的情况下为表内的按钮触发onclick事件时调用方法。 br /> 每行包含一个删除按钮。所以，如果我点击该行必须删除的删除按钮。 我只使用javascript在表格中创建表格和删除按钮。 以下是我写的代码 < html > < head > < style type = text / css > td { min-height ： 16px; } < / 风格 > < script language = javascript type = text / javascript > function CreateTable（）{ var bo = document .getElementsByTagName（' body'）[ 0 ]; var ta = document .createElement（' table'）; ta.setAttribute（' id'， row）; ta.style.width = ' 50％'; ta.setAttribute（' border'， 1 ）; ta.setAttribute（' align'， ' center'）; var tb = document .createElement（' tbody'）; for （i = 0 ; i< 3 ; i ++）{ var tr = document .createElement（' tr'）; for （j = 0 ; j< 3 ; j ++）{ var td = document .createElement（' td'）; td.innerHTML = Hello; // alert（td.innerHTML）; tr.appendChild（td ）; } deletebutton = document .createElement（ 按钮）; deletebutton.setAttribute（' id'， ' del'）; deletebutton.innerHTML = delete; deletecolumn = document .createElement（' td ）; alert（ beforedelete）; // 以下两行无效 // set.attribute（'onclick'，'deleteRow（'+ this +'）'）; // deletecolumn。 önclick= deleteRow（this.deletebutton）; deletecolumn.appendChild（deletebutton）; tr.appendChild（deletecolumn）; tb.appendChild（tr）; } ta.appendChild（tb）; bo.appendChild（ta）; } function AddRow（）{ var ta = document .getElementById（ row）; ta.setAttribute（' border'， 1 ）; ta.style.width = 50％; tr = document .createElement（' tr ）; tr.style.width = 50％; for （i = 0 ; i< 3; i ++） { td = document .createElement（' td' ）; td.style = { min-width： 16px}; tr.appendChild（td）; } ta.appendChild（tr）; // ta.insertCell（1）; // ta.insertCell（2）; } function deleteRow（ele）{ alert（ 东西）; var del = ele.parentNode.parentNode; alert（inner.HTML）; del.parentNode.removeChild（del）; // } < / script > ; < / head > < body > < 输入 type = button value = 点击 önclick = CreateTable（） > < 输入 type = button value = addRow önclick = AddRow（） / > < / body > < / html > 解决方案 当然你可以在HTML中为每个有问题的按钮添加一个事件属性，但它会完全繁琐的工作。 JavaScript和HTML DOM允许您动态添加任何偶数处理程序。一个伟大且极易使用的方法是使用jQuery。问题是您需要立即向DOM对象的 set 添加一些事件处理程序，因此问题是如何构建这样的集合。最好的方法是找出DOM中按钮的唯一位置，它由您需要的所有按钮共享，但不是任何其他元素。例如，您使用的按钮是某些< td> 元素的子元素，但其他按钮则不是。然后你可以使用适当的jQuery 过滤器选择器来获得这样的所有按钮的集合。在更糟糕的情况下，您可以简单地添加一些类属性（仅对此情况唯一）并使用属性选择器查找该集合。它甚至可以是< id> 属性;但ID应该是唯一的;所以你需要有一组类似的ID，并在属性选择器中使用它的公共子串。一般情况下，只有在每个元素需要唯一标识时才使用ID。 假设您想找出所有按钮，这些按钮是某些< TD> 。您可以使用此选择器： allMyButtons = （ td按钮：第一个孩子）; 请参阅：http://api.jquery.com/first-child-selector/ [ ^ ]。 在第二种方法中，你可以过滤通过某些属性： http://api.jquery.com/category/selectors/attribute-selectors/ [ ^ ]。 另请参阅： http://api.jquery.com/category/selectors [ ^ ]。 现在，当你有一组元素时，你可以为一个集合中的所有元素添加一个处理程序。请参阅： http://api.jquery.com/each/ [ ^ ]， http://api.jquery.com/click/ [ ^ ]。 它可能是这样的： allMyButtons.each（ function （index））{ （ this ）。点击（功能（{ // Hi,I would like to know how to call a method when an onclick event is fired for a button which is inside a table without using html.Every row contains a delete button. So if I click delete button that row has to delete.I have used only javascript for creating table and delete button inside a table.the below is the code I have written<html><head> <style type="text/css"> td{min-height:16px;} </style> <script language="javascript" type="text/javascript"> function CreateTable() { var bo = document.getElementsByTagName('body')[0]; var ta = document.createElement('table'); ta.setAttribute('id', "row"); ta.style.width='50%'; ta.setAttribute('border', 1); ta.setAttribute('align', 'center'); var tb = document.createElement('tbody'); for (i = 0; i < 3; i++) { var tr = document.createElement('tr'); for (j = 0; j < 3; j++) { var td = document.createElement('td'); td.innerHTML = "Hello"; //alert(td.innerHTML); tr.appendChild(td); } deletebutton = document.createElement("button"); deletebutton.setAttribute('id', 'del'); deletebutton.innerHTML = "delete"; deletecolumn = document.createElement('td'); alert("beforedelete"); //below two lines are not working //set.attribute('onclick', 'deleteRow('+this+')'); // deletecolumn. önclick = deleteRow(this.deletebutton); deletecolumn.appendChild(deletebutton); tr.appendChild(deletecolumn); tb.appendChild(tr); } ta.appendChild(tb); bo.appendChild(ta); } function AddRow() { var ta = document.getElementById("row"); ta.setAttribute('border', 1); ta.style.width = "50%"; tr = document.createElement('tr'); tr.style.width = "50%"; for(i=0;i<3;i++) { td = document.createElement('td'); td.style = { "min-width": "16px" }; tr.appendChild(td); } ta.appendChild(tr); // ta.insertCell(1);// ta.insertCell(2); } function deleteRow(ele) { alert("something"); var del = ele.parentNode.parentNode; alert(inner.HTML); del.parentNode.removeChild(del); // } </script></head><body> <input type="button" value="click" önclick="CreateTable()"> <input type="button" value="addRow" önclick="AddRow()" /> </body></html> 解决方案 Of course you could add an event attribute to each of the buttons in question in HTML, but it would be utterly tedious work.JavaScript and HTML DOM allow you to add any even handler dynamically. A great and extremely easy-to-use way of doing so would be using jQuery. The problem is that you need to add some event handler to a set of DOM object at once, so the problem is how to build such a set. The best way would be to find out unique position of the button in the DOM, which is shared by all buttons you need, but not any other elements. For example, your are using the the buttons which are children of some <td> elements, but other buttons are not. Then you can use appropriate jQuery filter selector to obtain the set of all buttons like that. In worse case, you can simply add, say, some class attribute (unique only to this case) and find the set using the attribute selector. It could even be the <id> attribute; but the IDs should be unique; so you would need to have a set of similar IDs and use its common substring in the attribute selector. Generally, use IDs only if you need unique identification for each single element.Suppose you want to find out all buttons which are the children of some <td>. You could use this selector:allMyButtons =("td button:first-child");Please see: http://api.jquery.com/first-child-selector/[^].In second approach, you can filter by some attribute: http://api.jquery.com/category/selectors/attribute-selectors/[^].See also: http://api.jquery.com/category/selectors[^].Now, when you got a set of element, you can add a handler to all elements in a set. Please see:http://api.jquery.com/each/[^],http://api.jquery.com/click/[^].It could be something like:allMyButtons.each(function(index)) {(this).click(function({ // 这篇关于如何使用javascript为table.wrriten的每一行中的按钮触发事件时调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 11-02 01:07