如何在jquery中替换name参数？

I have a table and it has multiple rows and I need to replace the name attribute for every html element in each td.

我有一个表,它有多行,我需要替换每个td中每个html元素的name属性。

my html looks like this:

我的HTML看起来像这样:

<div class="finalizedCollections">
<table>
    <tbody>
        <tr>
            <td>
                <input name="[0].CustomerID" value="1"></td>
            <td>first100
                <input name="[0].CustomerName" value="first100">
            </td>
            <td>
                <select name="[0].CollectionPayType">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>data2</td>
        </tr>
        <tr>
            <td>
                <input name="[0].CustomerID" value="1"></td>
            <td>second100
                <input name="[0].CustomerName" value="second100">
            </td>
            <td>
                <select name="[0].CollectionPayType">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>data2</td>
        </tr>
    </tbody>
</table>

Now I have to replace value in [ ] for every input element present in each tr.

现在我必须为每个tr中存在的每个输入元素替换[]中的值。

for example in first row td,input name attribute should be [0].CustomerID and in subsequent input elements [1].CustomerId.

例如,在第一行td中,输入名称属性应该是[0] .CustomerID和后续输入元素[1] .CustomerId。

The steps I am following is:

我遵循的步骤是:

for each tr,check whether a input element is present in every td and if present replace the value in [ ] for name attribute,starting with 0 and for subsequent tr replace with +1 value

对于每个tr,检查每个td中是否存在输入元素,如果存在,则替换名称属性的[]中的值,从0开始,后续tr替换为+1值

for ex, in first tr,all input values in all tds(if exists) should have [0] and in next tr it should be [1] and so on.

例如,在第一个tr中,所有tds中的所有输入值(如果存在)应该具有[0],而在下一个tr中它应该是[1],依此类推。

Any help?

Thanks in advance.

提前致谢。

1 个解决方案

#1

Check the following example (inspect elements to check the name attribute)

检查以下示例(检查元素以检查name属性)

EXPLANATION

• Iterate over each row and get the index.

迭代每一行并获得索引。

• For each row, check if there is any input element and, if true, loop through them

对于每一行,检查是否有任何输入元素,如果为true,则循环遍历它们

• Split the name attribute by . , get the second part and store it to a variable ('nm')

拆分名称属性。 ,获取第二部分并将其存储到变量('nm')

• Replace each name attribute with the row index followed by the 'nm' variable

将每个name属性替换为行索引,后跟'nm'变量

EDIT (NOTE)

If you want to change the select elements also, you could apply a common class to all of those elements you want to change and select this class in this line:

如果您还想更改select元素,可以将公共类应用于要更改的所有元素,并在此行中选择此类:

var inp = $(this).find('.common_class');

CODE

$('table tr').each(function(index) {
   var inp = $(this).find('input');
   if (inp.length > 0) {
      inp.each(function() {
         var that = $(this);
         var nm = that.attr('name').split('.')[1];
         that.attr('name', '[' + index + '].' + nm);
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table>
    <tbody>
        <tr>
            <td>
                <input name="[0].CustomerID" value="1"></td>
            <td>first100
                <input name="[0].CustomerName" value="first100">
            </td>
            <td>
                <select name="[0].CollectionPayType">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>data2</td>
        </tr>
        <tr>
            <td>
                <input name="[0].CustomerID" value="1"></td>
            <td>second100
                <input name="[0].CustomerName" value="second100">
            </td>
            <td>
                <select name="[0].CollectionPayType">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>data2</td>
        </tr>
    </tbody>
</table>