我的 HTML:
<html>
<head>
<title>Table</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
Row:<input id="gRow">Col:<input id="gCol"><button onClick="selectCell()">Find</button>
<button onClick="addCol(); update();">Add Col</button><br/>
<button onClick="addRow(); update();">Add Row</button><br/>
<table id="tab">
<tr class="rowtitle">
<td></td>
<th>1</th>
</tr>
<tr class="row row-1">
<th class="coltitle">1</th>
<td class="col col-1 edit"></td>
</tr>
</table>
<script type="text/javascript">
update();
function update(){
$('.edit').bind('dblclick', function() {
$(this).attr('contentEditable', true);
}).blur(function() {
$(this).attr('contentEditable', false);
});
}
</script>
</body>
</html>
我的Javascript:
nCol = 1,
nRow = 1;
var addCol = function(){
nCol++;
//add nes cols
$('.rowtitle').append("<th class='title'>"+nCol+"</th>");
for (var i = 0; i <= nCol; i++) {
$('.row-'+i).append( "<td class = 'col col-" + i + " edit'></tr>" );
};
};
var addRow = function(){
nRow++;
$("#tab").append( "<tr class = 'row row-" + nRow + "'></tr>" );
$('.row-'+nRow).append("<th class='coltitle'>"+nRow+"</th>")
//add nes cols
for (var i = 1; i <= nCol; i++) {
$('.row-'+nRow).append( "<td class = 'col col-" + i + " edit'></tr>" );
};
};
var selectCell = function(){
var col = $('#gCol').val(),
row = $('#gRow').val();
console.log('.row-'+row+' .col-'+col);
$('.row-'+row+' .col-'+col).css('background-color', 'red');
};
当我使用 selectCell 时，我发现它不起作用。经过检查，我注意到这些行正在做它们应该做的事情，每次都是一个独特的类。但是，这些列会在一行中重复多次。我该如何解决这个问题？
要查看实际发生的情况，请创建一堆行和列。然后键入第 3 行和第 5 列。这是应该发生的情况。但是，现在键入 1 和 1。 Demo
最佳答案
您的 addCol 有问题。应该是:
var addCol = function () {
nCol++;
//add nes cols
$('.rowtitle').append("<th class='title'>" + nCol + "</th>");
$('.row').append("<td class = 'col col-" + nCol + " edit'></tr>");
};
关于javascript - 奇怪的动态表错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28335856/