我们可以在html,jQuery中使用变量名

时间:2015-07-29 09:12:16

标签: javascript jquery

我有以下结构

<tr>
    <td data-unit="spear" class="tooltip">
        <input type="text" size="2" name="spear-1" />
    </td>
    <td data-unit="sword" class="tooltip">
        <input type="text" size="2" name="sword-1" />
    </td>
</tr>

我希望每次我通过名称中的jQuery变量调用clone函数时都会自动增加spear-2. sword-2

这是一个例子,我有20个这样的领域,我想要一个可以改变所有这一点的通用的东西

这可能吗?

2 个答案:

答案 0 :(得分:2)

尝试这样简单的示例代码:

<强> HTML

<table>
<tr>
    <td data-unit="spear" class="tooltip">
        <input type="text" size="2" name="spear" />
    </td>
    <td data-unit="sword" class="tooltip">
        <input type="text" size="2" name="sword" />
        <input type="checkbox" name="knife" />
        <select name="book">
            <option>as</option>
        </select>
    </td>
</tr>
</table>
<button>click</button>

<强>的jQuery

$(document).ready(function () {
  var a = 0;
  $('button').click(function () {
    a++;
    var tr = $('tr').first().clone();

    // inside find(), put any element you want to increment
    // eg : .find('input, select, textarea')

    $(tr).find('input, select').attr('name', function(i, e){

        // i => index
        // e => old value
        // a => custom increment value
        return e+'-' + a;
    });
    $(tr).appendTo('table');
 })
});

DEMO - 检查元素(chrome)以查看为新克隆元素更改的属性名称。

答案 1 :(得分:0)

此Jquery代码可以帮助您克隆具有不同ID

的HTML元素
<script type="text/javascript">
        $(document).ready(function () {
            var i = 2
            $("#btnClone").click(function () {
                $("#SpearClone").html($("#SpearClone").html() + '<input type="text" size="2" name="spear-' + i + '" />');
                $("#SwordClone").html($("#SwordClone").html() + '<input type="text" size="2" name="sword-' + i + '" />');
                i++;
            });

        });
    </script>

<div id="DivClone">
        <table>
            <tr>
                <td data-unit="spear" class="tooltip" id="SpearClone">
                    <input type="text" size="2" name="spear-1" />
                </td>
                <td data-unit="sword" class="tooltip" id="SwordClone">
                    <input type="text" size="2" name="sword-1" />
                </td>
            </tr>
        </table>
        <input type="button" id="btnClone" value="Call Clone" />
    </div>

我希望我能帮助你...... 问候;)