用函数替换整个DIV

Replacing entire DIV with function

本文关键字：DIV 替换 函数      更新时间：2023-09-26

我试图用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);
})

因此，正如下面所建议的，将"replaceWith"更改为"empty"解决了我的部分问题。然而，它破坏了我程序的另一部分。我应该能够点击任何字符并将其更改为输入的任何字符，而无需更改整个表，如下所示：

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

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

最大的问题是您正在创建无效的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/

您可以用新的html替换html。

这是js代码：

$("#start").click(function() {
  var x = $("#rows").val(),
      y = $("#columns").val(),
      charx = $("#char").val();
//getting teh no of columns, rows and the character
  $("#container").html("");
//empty the container first
 var table = document.createElement("table");
 for (var i = 0; i < x; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < y; j++) {
       var td = document.createElement("td");
       td.innerHTML = charx;
       tr.appendChild(td);
    }
    table.appendChild(tr);
 }
//creating the table based on the values
 $("#container").append(table);
//appending inside the container
});

这是Plnkr链接

希望它对你有用：）

相关文章：