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

时间:2012-02-28 17:10:18

标签: javascript jquery

我已经使用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>");
    }
})

正如您在我的代码中看到的那样,我正在生成var的输入,但我的问题是这是否安全。我的代码是否容易受到JS注入或类似的攻击?有一个更好的方法吗?

1 个答案:

答案 0 :(得分:1)

所有这些都发生在客户端上,所以你的代码应该没问题。你可能想要查看这种事情的客户端模板 - 然后你可以完全废弃vars并编辑html将更加愉快。当我需要从javascript渲染相对复杂的东西时,我使用jqote