Question

我的HTMl表格中有以下输入：

<input type='text' name='speaker[][]' class='form-control mb5' placeholder='Speaker' value='' />
<input type='text' name='seminartitle[][]' class='form-control mb5' placeholder='Seminar Title' value='' />

现在，我在表单的其他地方有一个按钮，它复制了包含这些输入的行。我希望能够做的是用数字替换第一个[]，所以在第一排我有：

<input type='text' name='speaker[0][]' class='form-control mb5' placeholder='Speaker' value='' />
<input type='text' name='seminartitle[0][]' class='form-control mb5' placeholder='Seminar Title' value='' />

第二个：

<input type='text' name='speaker[1][]' class='form-control mb5' placeholder='Speaker' value='' />
<input type='text' name='seminartitle[1][]' class='form-control mb5' placeholder='Seminar Title' value='' />

等等。我不知道如何在javascript / jquery中这样做。

Answer 1

在克隆输入后，您可以像这样提取name属性。（假设您已将输入保存在名为$ clonedInput的变量中）

var speakerName = $clonedInput.attr('name');

然后使用正则表达式（RegEx）来确定它是否已经有一些内容，如果它没有为它分配0。

var speakerIndex = speakerName.match(\[(\d)?\]\[\]);
speakerIndex = parseInt(speakerIndex[1]);
speakerIndex = isNaN(speakerIndex) ? 0 : speakerIndex + 1;

最后，我们更改了克隆元素的属性。

$clonedInput.attr('name', 'speaker[' + speakerIndex + '][]';

一些澄清：

RegEx正在检查以查找以下模式[<optional number>][]，这意味着您可以对input使用相同的RegEx，因为它不会检查它是否为speaker或seminartitle。我们访问speakerIndex[1]的原因是正则表达式在假设数字周围有一个捕获组。

Answer 2

您可以通过使用此功能的结果替换当前名称值来添加您的号码：

function addNumber(num, inputName, position){
    if(inputName !== "speaker[][]"){
        return null;
    }else{
        var res = [inputName.slice(0, position), num, inputName.slice(position)].join('');
        return res;
    }
}

用num：你要放的数字 inputName：要更改的输入的输入名称 position：你想把num放在inputName中的位置。

您只需要通过函数的返回值替换输入的名称。

使用javascript增加input []数组编号

2 个答案: