Javascript 在表中动态插入带有输入的行

我使用jQuery构建了一个函数，在表中插入一个新行，包括一些输入，如文本框、复选框和一个按钮

这是我的代码：

$('#AddEntry').click(function () {
    var lastTrClass = $('tr:last').attr('class');

    var textBoxTitle = '<input id="titleid" type="text" value="" style="width: 100%; vertical-align: middle">';

    var textBoxStartDate = '<input id="StartDate" type="text" class="required DatePicker" value="" style="width: 100%; vertical-align: middle">';

    var checkBoxSync = '<input id="Sync" type="checkbox" checked="checked" disabled="disabled" value="true" style="vertical-align: middle">';

    var lastDate = '<input id="LastSyncDate" class="required DatePicker" type="text" value="" style="width: 100%; vertical-align: middle">';

    var buttonEdit = '<button id="btnEditar" class="EditButton icon_only text_only" style="vertical-align: middle;" type="button">Editar</button>';

    if (lastTrClass == 'gradeA odd') {
        $('#DataTable > tbody:last').append("<tr class='gradeA even'><td>#</td><td>" + textBoxTitle + "</td><td>" + textBoxStartDate + "</td><td>" + checkBoxSync + "</td><td>" + lastDate + "</td><td>" + buttonEdit + "</td></tr>");
    }
    else {
        $('#DataTable > tbody:last').append("<tr class='gradeA odd'><td>#</td><td>" + textBoxTitle + "</td><td>" + textBoxStartDate + "</td><td>" + checkBoxSync + "</td><td>" + lastDate + "</td><td>" + buttonEdit + "</td></tr>");
    }
})

$（'AddEntry'）。单击（函数（）{
var lastTrClass=$（'tr:last'）.attr（'class'）；
var textBoxTitle=''；
var textBoxStartDate=''；
var checkBoxSync=''；
var lastDate=''；
var buttonEdit='Editar'；
如果（lastTrClass=='gradeA奇数'）{
$（“#DataTable>tbody:last”）.append（“#”+textBoxTitle+”“+textBoxStartDate+”“+checkBoxSync+”“+lastDate+”“+buttonEdit+”）；
}
否则{
$（“#DataTable>tbody:last”）.append（“#”+textBoxTitle+”“+textBoxStartDate+”“+checkBoxSync+”“+lastDate+”“+buttonEdit+”）；
}
})

---

正如您在我的代码中所看到的，我正在将输入生成一个

var

，但我的问题是这是否安全。我的代码容易受到JS注入之类的攻击吗？有更好的方法吗

所有这些都发生在客户机上，因此您的代码应该可以。不过，您可能想检查一下这种类型的客户端模板——然后您可以完全放弃VAR，编辑html会更愉快。当我需要从javascript呈现相对复杂的内容时，我会使用它。

它与向DOM添加元素的任何其他方法一样安全。代码中的“var”仅在函数中起作用，并且是私有的。是的，“var”只在函数中起作用非常有趣的@coalvilledave，检查jqote。谢谢