0

是的，我已经尝试创建此表单大约 3 天了。我一切正常，但是当需要验证以查看是否填写了输入时，一切都失控了。

表单需要有一个由 mySQL 值填充的下拉框。旁边也会有一个文本框供输入。文本框需要通过 javascript 验证以检查输入是否在文本框中。然后，一个用于删除行的按钮。

添加按钮应该在所有这些之上，并且只需添加另一行相同的输入。

我使用了 innerHTML 语句并使用计数器将所有内容传递到 PHP 数组中，但是删除按钮和验证变得太复杂了。

我在 Web 应用程序的其他部分使用 jQuery，所以这是一个选项。

任何方向或示例代码都会有很大帮助。

谢谢

能够使用此代码

<script type="text/javascript">
$(document).ready(function() {
if(typeof intId==='undefined')
{
     $(".add").attr("disabled", "true");
}
$("#addButton").click(function() {
    var intId = $("#prodpart div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"partfield" + intId +     "\"/>");
    var partlabel = $("<label>Part #" + intId + ":</label>&nbsp;");
    var part = $("<select name=\"part[" + intId + "]\"><?php echo $option2; ?></select>");
    var partqtylabel = $("<label>Part QTY #" + intId + ":&nbsp;</label>&nbsp;");
    var partqty = $("<input type=\"text\" class=\"required\" onblur=\"enable()\"     value=\"\" size=\"5\" id=\"partqty" + intId + "\" name=\"partqty[" + intId + "]\" class=\"fieldname\" />");
    var parttimelabel = $("<label> Run Time #" + intId + ":</label>&nbsp;");
    var parttime = $("<input type=\"text\" size=\"5\" value=\"NOT REQUIRED\" name=\"runparttime[" + intId + "]\" />");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Del\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(partlabel);
    fieldWrapper.append(part);
    fieldWrapper.append(partqtylabel);
    fieldWrapper.append(partqty);
    fieldWrapper.append(parttimelabel);
    fieldWrapper.append(parttime);
    fieldWrapper.append(removeButton);
    $("#prodpart").append(fieldWrapper);
    });
});
function disable(){
$(".add").attr("disabled", "true");
$(".required").blur(function(){
    if ($(this).val() != initVal && $(this).val() != "") {
    $(".add").removeAttr("disabled");
    } else {
    $(".add").attr("disabled", "true");        
    }
}); 
};
function enable(){
    $(".add").removeAttr("disabled");
};

这是上面用于写入行、删除和验证的 javascript。

<input type="button" value="Add Prod Part" class="add" onclick="disable()" id="addButton" />

我的按钮之一。在所需框中输入文本之前，按钮被禁用。输入文本后，按钮启用，您可以添加另一行。这仍然有点错误，但可以很好地满足我的需要。

4

1 回答 1

0

我最近构建了类似的东西，我拥有的是以下内容：

  1. 在开始时，所有行、单元格和字段都是从 mySQL DB 生成和填充的。

  2. 所有输入类型都在一个表行中。

  3. 左侧是订购号。这允许人们重新排序他们的数据。

  4. 然后我有一个交互式“重新排序”功能，它允许行自动移动。

  5. “删除”功能在每一行的右侧；删除一行会将其移至底部，然后删除底部行。

  6. “添加”函数将添加一个表格行table.insertRow(table.rows.length);并插入相关数据。

最重要的是，我还有一个“行数”变量，分别由添加/删除按钮递增/递减。

然后数据验证成为for所有表行的循环（使用“行计数”）。祝你好运——这对我来说并不容易，我会发布源代码，但我认为这不是你想要的（没有验证，并且已经预设了很多表数据列）。

于 2012-06-07T13:26:11.807 回答