如何动态更改rad按钮名称

时间：2016-07-04 09:26:56

标签： javascript

我正在努力制作一个用户选择性别的小形式。我有一个脚本为其他用户创建一个新行，但问题是，由于此代码克隆了前一个元素，并且单选按钮名称属性与使性别选择名称不可用之前相同，是否有办法更改收音机添加新行时按钮名称，以便该组与以前的组名称不同。

function addRow() {
  var radName = document.getElementsByName('gender2').value;
  var table = document.getElementById('myTable');
  var row = document.getElementById('lastRow');
  var newRow = row.cloneNode(true);
  table.appendChild(newRow);
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>

<body>
  <div id="tableDiv">

    <table id="myTable">
      <tr id="firstRow">
        <td>Surname</td>
        <td>Forname(S)</td>
        <td>Age</td>
        <td>City</td>
        <td class="gender">Male</td>
        <td class="gender">Female</td>
      </tr>

      <tr>
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender0" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender0" type="radio" value="Female" />
        </td>
      </tr>

      <tr>
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender1" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender1" type="radio" value="Female" />
        </td>
      </tr>

      <tr id="lastRow">
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender2" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender2" type="radio" value="Female" />
        </td>
      </tr>
    </table>
  </div>

  <input type="submit" id="buttonOne" onclick="addRow()" value="+" />
  </div>
</body>



</html>

3 个答案:

答案 0 :(得分：4)

  • 为cloned节点的子元素分配length属性。
  • 使用querySelector选择元素。
  • 使用querySelectorAll('#myTable tr')选择器获取tr元素的function addRow() { var radName = document.getElementsByName('gender2').value; var table = document.getElementById('myTable'); var row = document.getElementById('lastRow'); var newRow = row.cloneNode(true); var index = --document.querySelectorAll('#myTable tr').length; newRow.querySelector('[value="Male"]').name = 'gender' + index; newRow.querySelector('[value="Male"]').name = 'gender' + index; table.appendChild(newRow); }。

<div id="tableDiv">
  <table id="myTable">
    <tr id="firstRow">
      <td>Surname</td>
      <td>Forname(S)</td>
      <td>Age</td>
      <td>City</td>
      <td class="gender">Male</td>
      <td class="gender">Female</td>
    </tr>
    <tr>
      <td>
        <input placeholder="Surname" />
      </td>
      <td>
        <input placeholder="Forename(S)" />
      </td>
      <td>
        <input placeholder="Age" />
      </td>
      <td>
        <input placeholder="City" />
      </td>
      <td>
        <input class="gender" name="gender0" type="radio" value="Male" />
      </td>
      <td>
        <input class="gender" name="gender0" type="radio" value="Female" />
      </td>
    </tr>
    <tr>
      <td>
        <input placeholder="Surname" />
      </td>
      <td>
        <input placeholder="Forename(S)" />
      </td>
      <td>
        <input placeholder="Age" />
      </td>
      <td>
        <input placeholder="City" />
      </td>
      <td>
        <input class="gender" name="gender1" type="radio" value="Male" />
      </td>
      <td>
        <input class="gender" name="gender1" type="radio" value="Female" />
      </td>
    </tr>
    <tr id="lastRow">
      <td>
        <input placeholder="Surname" />
      </td>
      <td>
        <input placeholder="Forename(S)" />
      </td>
      <td>
        <input placeholder="Age" />
      </td>
      <td>
        <input placeholder="City" />
      </td>
      <td>
        <input class="gender" name="gender2" type="radio" value="Male" />
      </td>
      <td>
        <input class="gender" name="gender2" type="radio" value="Female" />
      </td>
    </tr>
  </table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
<div class="row"> => *1251 pixel*
  <div class="col-xs-6"></div> => 555.5 pixel
    <table class="table">...</table> => 545.5 pixel
  <div class="col-xs-6"></div> => 555.5 pixel
</div>

答案 1 :(得分：1)

您不应该尝试克隆该行并对名称进行更改。

您应该为该行生成HTML代码并直接输入正确的名称。

以下是一个示例代码段：

var idx = 0;

window.onload = addRow;

function addRow() {
  var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>';
  var row = document.createElement("tr");
  row.innerHTML = rowHTML;
  
  var table = document.getElementById('myTable');
  table.appendChild(row);
  idx++;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>

<body>
  <div id="tableDiv">

    <table id="myTable">
      <tr id="firstRow">
        <td>Surname</td>
        <td>Forname(S)</td>
        <td>Age</td>
        <td>City</td>
        <td class="gender">Male</td>
        <td class="gender">Female</td>
      </tr>
    </table>

  <input type="submit" id="buttonOne" onclick="addRow()" value="+" />
  </div>
</body>
</html>

答案 2 :(得分：0)

使用JQuery完成此操作，试试这个：

function addRow() {
  var table = $('#myTable');
  var newRow = $("#myTable tr:last").clone()
  var name = $(newRow).find("input[type='radio']").attr("name");
  var newVal = parseInt(name.match(/\d+/)) + 1;
  $(newRow).find("input[type='radio']").attr("name", 'gender' + newVal);
  table.append(newRow);
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>

<body>
  <div id="tableDiv">

    <table id="myTable">
      <tr id="firstRow">
        <td>Surname</td>
        <td>Forname(S)</td>
        <td>Age</td>
        <td>City</td>
        <td class="gender">Male</td>
        <td class="gender">Female</td>
      </tr>

      <tr>
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender0" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender0" type="radio" value="Female" />
        </td>
      </tr>

      <tr>
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender1" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender1" type="radio" value="Female" />
        </td>
      </tr>

      <tr id="lastRow">
        <td>
          <input placeholder="Surname" />
        </td>
        <td>
          <input placeholder="Forename(S)" />
        </td>
        <td>
          <input placeholder="Age" />
        </td>
        <td>
          <input placeholder="City" />
        </td>
        <td>
          <input class="gender" name="gender2" type="radio" value="Male" />
        </td>
        <td>
          <input class="gender" name="gender2" type="radio" value="Female" />
        </td>
      </tr>
    </table>
  </div>

  <input type="submit" id="buttonOne" onclick="addRow()" value="+" />
  </div>
</body>



</html>

相关问题
最新问题