我有一个问题,我的代码...实际上,我发现了一个代码,我尝试了它的工作(http://www.srccodes.com/p/article/40/determine-click-position-row-column-number-onclick-table-cell),但当我尝试创建一个函数的表,它不工作,我找不到原因... 。 请帮忙 !!这里是代码: 谢谢! 如何通过单击表格来检测单元格?
$(document).ready(function()
{
//my function to create my table
$("#btn-create-table").click(function create_new_table(){
var nb_columns = document.getElementById("columns").value;
var nb_rows = document.getElementById("rows").value;
var table=document.createElement("table");
$(table).attr("element", "table");
$(table).append(thead=document.createElement("thead"));
$(thead).append(line=document.createElement("tr"));
for (var j=0; j<nb_columns;j++) {
$(line).append(document.createElement("th"));
};
$(table).append(tbody=document.createElement("tbody"));
for(var j=0;j<nb_rows;j++){
$(tbody).append(line=document.createElement("tr"))
for (var k=0; k<nb_columns;k++) {
$(line).append(td=document.createElement("td"));
};
};
$("#content").append(table);
});
//the function I've found to detect rows and columns on mouse click
$("[element = 'table'] td").click(function() {
var column_num = parseInt($(this).index());
var row_num = parseInt($(this).parent().index());
$("#result").html("Row_num =" + row_num + " , Rolumn_num ="+ column_num);
});
});
table {
border-collapse: collapse;
width: 100%;
height: 60px;
}
table td {
border-width: 1px;
border-style: solid;
border-color: grey;
height: 60px;
text-align: center;
}
table thead {
width: 100%;
height: 60px;
background-color: rgba(0, 0, 255, 0.2);
}
table th {
border-width: 1px;
border-style: solid;
border-color: grey;
height: 60px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<label for="columns">
<input id="columns" type="number" min="1" placeholder="columns"></input>
</label>
<br />
<label for="rows" class="">
<input id="rows" type="number" min="1" placeholder="rows"></input>
</label>
<br />
<button id="btn-create-table">create</button>
<div id="content" contentEditable="true">
<div id="result"></div>
<table element="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<!--1st ROW-->
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
<td>row 1, col 3</td>
<td>row 1, col 4</td>
<td>row 1, col 5</td>
</tr>
<!--2nd ROW-->
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
<td>row 2, col 3</td>
<td>row 2, col 4</td>
<td>row 2, col 5</td>
</tr>
<!--3rd ROW-->
<tr>
<td>row 3, col 1</td>
<td>row 3, col 2</td>
<td>row 3, col 3</td>
<td>row 3, col 4</td>
<td>row 3, col 5</td>
</tr>
<!--4th ROW-->
<tr>
<td>row 4, col 1</td>
<td>row 4, col 2</td>
<td>row 4, col 3</td>
<td>row 4, col 4</td>
<td>row 4, col 5</td>
</tr>
<!--5th ROW-->
<tr>
<td>row 5, col 1</td>
<td>row 5, col 2</td>
<td>row 5, col 3</td>
<td>row 5, col 4</td>
<td>row 5, col 5</td>
</tr>
</tbody>
</table>
</div>
你期望发生什么? – guradio
什么不行? – Rayon
检测单元格的功能只在我手动创建表格时起作用我的意思是作为在div中显示的表格,但是当我使用函数“create_new_table”创建表格时,点击单元格不起作用...所以我不能工作知道用户点击哪个单元格... – Birdy