Question

我正在编写一个javascript库，我需要创建一个javascript函数，您可以调用它来在您的网页上创建一个表单（scheduler）。

这是表单的html代码：

    <form>
    <table border="1" cellpadding="5">
    <tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
    <tr>
        <td width="50">hours</td>
        <td></td>
        <td width="50">minutes</td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat</td>
        <td>Sun</td>
    </tr>
    <tr>
        <td width="50"><input type="text" id="hours" maxlength="2" size="1"></td> 
        <td width="2"> : </td> 
        <td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
        <td> <input type="checkbox" id="mon"></td>
        <td> <input type="checkbox" id="tue"></td>
        <td> <input type="checkbox" id="wed"></td>
        <td> <input type="checkbox" id="thu"></td>
        <td> <input type="checkbox" id="fri"></td>
        <td> <input type="checkbox" id="sat"></td>
        <td> <input type="checkbox" id="sun"></td>
    </tr>


    <tr>
        <td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
    </table>
    </form>

我对结果的看法是用户只需要在他的网页中创建一个div，然后在javascript中，使用正确的参数调用我的函数，这些参数反过来显示我的预定义表单。但是我还需要在'setbutton'中添加一些功能，它需要将数据写入我的PLC（可编程逻辑控制器）中的地址

我希望函数调用看起来像：showScheduler（id，adres）; id是除法的id，adres是我需要写入的可编程逻辑控制器中的地址。

在javascript函数中将表单写入我的网页的最佳方法是什么？

我希望你们能理解，但如果需要，我很乐意给你更多解释。

Answer 1

您可以执行以下操作：

<div id="placeholder">
</div>

<script type="text/javascript">
    function createForm(divId) {
        var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
        document.getElementById(divId).innerHTML = formHtml;
    }
</script>

并在需要时调用示例createForm("placeholder")。

Answer 2

听起来你特别希望用户 ONLY 拥有他们的html和加载在你的js文件中的<script>标签。您需要使用特定的id或自定义css类作为选择器。那么用户的html部分看起来就像：

<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>

然后在你的javascript文件中，你需要创建你的函数来写入内容，并将该函数与window.load()上的执行联系起来。类似的东西：

$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
   function(){ showScheduler("customID"); }
);

function showScheduler(id)
{
    var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
    $("#"+id).html(contents);
}

我不确定您正在寻找关于adress部分的确切内容，但您可以轻松扩展showScheduler()函数以包含adress值的第二个参数，然后将其粘贴到contents值的其余部分的中间。类似的东西：

function showScheduler(id, adress)
{
    var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
    $("#"+id).html(contents);
}

此外，如果您希望让用户从他们的页面调用该函数，您可以跳过关于将此与此绑定到dom执行的部分（即完全删除$( function(){ showScheduler("customID"); } );部分

使用javascript函数将HTML表单写入网页

2 个答案: