所以我使用Javascript和jQuery创建一个表,我想要它,这样当你点击表格第一行的td时,那个列中其余的td就会下拉。让我试着通过展示我的代码来解释它。这是我的Javascript:
function createTr (heights) { //heights is just an array of words
for (var h=0; h<heights.length; h++) {
var theTr = $("<tr>", { id: "rowNumber" + h});
for (var i=0; i<heights.length-3; i++) {
theTr.append($("<td>", { "class": "row"+h + " column"+i,
html: heights[h][i]
}));
}
$('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
}
}
这基本上创建了td,每个td类似于这种格式
<td class="rowh columni">
我想要它,以便除了.row0中的td之外都隐藏所有td,如果你点击.row0 .columni中的td,那么.columni中的所有td都会出现。参数'heights'是一个数组,例如,它可以是
var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];
并且它将使用这些单词创建一个表,headerOne和headerTwo将在第一行中,someTd和anotherTd将在第二行中。
现在,当我尝试添加这样的点击功能时
function animation() {
$('td').click( function() {
alert('clicked');
});
}
然后在我的document.ready函数中调用它
$(document).ready( function() {
createTr(heights);
animation();
});
当我点击一个td时它什么也没做。怎么会?
因为您在创建DOM之后创建元素。使用“on”选择器可以获得动态创建的精确元素。
从URL:
$("#newTable").on("click", "td", function() {
alert($( this ).text());
});
试试这样:
$('body').on('click','td', function() {
alert('clicked');
});
试试这个
function animation() {
$(document).on('click','td',function() {
alert('clicked');
});
}
这段代码工作得很好:
$(document).ready(function(){
$("td").click(function(){
if(this.title!=""){
alert(this.title);
}
});
});
我喜欢这个。-
$("#table tr").click(function(){
console.log(this);
});