Question

我有以下HTML

<form action="sendform.php" method="post" id="monogramming-builder">
  <fieldset>
    <table>
      <tr>
        <th>Qty</th>
        <th>Colour</th>
        <th>Size</th>
        <th>Name</th>
        <th>Remaining</th>
        <th>Remove</th>
      </tr>
      <tr>
        <td><input type="text" name="qty1" /></td>
        <td>
          <select name="colour1">
            <option value="">[Please Select]</option>
            <option value="Red">Red</option>
            <option value="Black">Black</option>
            <option value="White">White</option>
          </select>
        </td>
        <td>
          <select name="size1">
            <option value="">[Please Select]</option>
            <option value="Small">Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="XL">XL</option>
            <option value="2XL">2XL</option>
          </select>
        </td>
        <td><input type="text" name="name1" /></td>
        <td>18</td>
        <td><a href="javascript:;" class="remove">Remove Row</a></td>
      </tr>
    </table>
    <p><a href="javascript:;" class="addrow">Add a row</a></p>
  </fieldset>
</form>

点击.addrow链接后，我想要添加一个新行，但是对于每个name，我想为它们添加1。我有以下javascript：

var x = 2;
var tablerow = '<tr><td><input type="text" name="qty'+ x++ +'" /></td><td><select name="colour'+ x++ +'"><option value="">[Please Select]</option><option value="Red">Red</option><option value="Black">Black</option><option value="White">White</option></select></td><td><select name="colour'+ x++ +'"><option value="">[Please Select]</option><option value="Small">Small</option><option value="Medium">Medium</option><option value="Large">Large</option><option value="XL">XL</option><option value="2XL">2XL</option></select></td><td><input type="text" name="name'+ x++ +'" /></td><td>18</td><td><a href="javascript:;" class="remove">Remove Row</a></td></tr>'; 

$('.addrow').click(function(){
  $('tr:last-child').after(tablerow);
});

显然，到最后这个数字会增加到5个。

我的问题是，只有在添加整行之后才能运行增量吗？

Answer 1

每次编写x ++时，都在递增x。从x的第一次出现中删除++，并在最后一次出现之后将其保留为x ++。

例如，如果你使用字符串：“b”+ x ++ +“b”+ x ++ +“b”+ x ++，你将增加x三次，但如果你使用它像“b”+ x + “b”+ x +“b”+ x ++，你只增加一次x。

Answer 2

所以你想在每次点击并且添加一行后增加x：

var x = 2;

$('.addrow').click(function(){
  var tablerow = '<tr><td><input type="text" name="qty'+ x +'" /></td><td><select name="colour'+ x +'"><option value="">[Please Select]</option><option value="Red">Red</option><option value="Black">Black</option><option value="White">White</option></select></td><td><select name="colour'+ x +'"><option value="">[Please Select]</option><option value="Small">Small</option><option value="Medium">Medium</option><option value="Large">Large</option><option value="XL">XL</option><option value="2XL">2XL</option></select></td><td><input type="text" name="name'+ x +'" /></td><td>18</td><td><a href="javascript:;" class="remove">Remove Row</a></td></tr>';
  $('tr:last-child').after(tablerow);
  x++;
});

Answer 3

tablerow是一个字符串，在添加行之前创建，所以为了回答你的问题，答案是“不”。

然而，回答我认为是你问题的精神，答案是肯定的，你有很多选择。

var x = 1
var mystring = "a" + x + "b" + x;  //mystring = a1b1
x = x + 1
mystring = "c" + x + d + x;  //mystring = c2d2
mystring = "e" + (++x) + "f" + x; // mystring = e3f3

Javascript迭代 - 保持相同的数字直到下次运行

3 个答案: