Question

我试图在其中使用html启动div区域，然后用新的html替换该html。我目前正试图通过使用函数来简化html的创建。

这是我的函数，它根据行和列的输入以及字符创建表。

function drawArt (x, y, char){
    $( "#artArea").append("<table>");

    indexY = 0;

    while (indexY < y)
    {
        $( "#artArea").append("<tr>");
        var indexX = 0;
        while (indexX < x)
        {
            $( "#artArea").append("<td class=tableCell>" + char + "</td>");
            indexX++;
        }
        $( "#artArea").append("</tr>");
        indexY++;
    }
    $( "#artArea").append("</table>")
};

我希望能够重新调用此功能来重绘表格。到目前为止，这是我写的，但它似乎不起作用。有什么提示吗？

$( "#genNew" ).click(function(){

    var xGlobal = $("#numCols").val();
    var yGlobal = $("#numRows").val();
    var charGlobal = $("#drawChar").val();

    $( "#artArea" ).replaceWith();
    drawArt (xGlobal, yGlobal, charGlobal);
})

所以，正如下面的建议改变＆＃34; replaceWith＆＃34;到＆＃34;空＆＃34;修复了我的问题。然而，它打破了我的计划的另一部分。我应该可以点击任何一个字符并让它改变为输入的内容，而不是改变整个表格，如下所示：

$( ".tableCell" ).click(function(){
charGlobal = $("#drawChar").val();
$(this).text(charGlobal)
})

我的程序的哪一部分失败了？

Answer 1

最大的问题是你正在创建无效的HTML。您总是附加到#artArea表，因此您的标记将最终为

<table>
<tr></tr>
<td></td>
<td></td>
... etc
</table>

这不是你想要的。我建议你可以做的只是在drawArt内创建适当的html作为字符串，并使用`replaceWith来改变html

function drawArt (x, y, char){
    var html = "<table>";

    indexY = 0;

    while (indexY < y)
    {
        html += "<tr>";
        //-- snip, you get the idea!
    }
    html += "</table>"
    return html;
}

然后

$( "#genNew" ).click(function(){

    var xGlobal = $("#numCols").val();
    var yGlobal = $("#numRows").val();
    var charGlobal = $("#drawChar").val();

    $( "#artArea" ).html(drawArt (xGlobal, yGlobal, charGlobal));    
})

工作示例：http://jsfiddle.net/0sh1wt01/1/

在用新要求更新问题之后，我也应该解决这个问题。您的click事件处理程序对表格单元格不起作用的原因是click仅影响页面加载时页面上的元素。如果您正在动态添加新元素（如上所述），则需要将事件委托给页面加载时存在的元素。在这种情况下，我们可以使用artArea。请注意，您希望.html不是.text

$( "#artArea" ).on('click','.tableCell', function(){
    charGlobal = $("#drawChar").val();
    $(this).html(charGlobal);
});

实例：http://jsfiddle.net/0sh1wt01/2/

Answer 2

您可以用新的html替换html。

这是js代码：

{{1}}

以下是Plnkr Link

希望它适合你：）

用函数

2 个答案: