如何迭代html元素并交换它们的值[关闭]

Question

我想在点击向上/向下按钮时交换元素值。例如在下面的 html sn-p 中，我有两组 Guidance 和 Communication，在 UP/Down 按钮单击时，Guidance 集的所有值（复选框、文本框值）都必须与 Communication 值交换。我打算写一个简单的javascript交换函数，你能帮我用简单干净的javascript代码写吗？

JS：

var from_list = getElementsByClassName("from");
var to_list = getElementsByClassName("to");
for (var i = 0; i < from_list.length; i++) {
    //swap logic
}

HTML：

<table>
    <tr>
        <td></td>
        <td>Guidance :</td>
        <td>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g1">Box1</td>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g2">Box2</td>
                    <td>
                        <input type="checkbox" class="guidance" name="guidlobs" value="g3">Box3</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Guid Name:</td>
        <td>
            <input type="text" class="guidance" name="guidance_name" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Guid URL :</td>
        <td>
            <input type="text" class="guidance" name="guidance_url" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="DN" onclick="swap('guidance','communication')" />
        </td>
        <td>Guid Description:</td>
        <td>
            <input type="text" class="guidance" name="guidance_desc" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Communication :</td>
        <td>
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="commlobs" value="c1">Box1</td>
                    <td>
                        <input type="checkbox" name="commlobs" value="c2">Box2</td>
                    <td>
                        <input type="checkbox" name="commlobs" value="c3">Box3</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="UP" onclick="swap('communication','guidance')" />
        </td>
        <td>Communication Name :</td>
        <td>
            <input type="text" class="communication" name="communication_name" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Communication URL:</td>
        <td>
            <input type="text" class="communication" name="communication_url" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="DN" onclick="swap('communication','training')" />
        </td>
        <td>Communication Description :</td>
        <td>
            <input type="text" class="communication" name="communication_desc" style="width:500px;" value="" />
            <br />
        </td>
    </tr>
</table>

Answer 1

我不清楚你想要实现什么。看看这对你有没有帮助：

window.swap = function(fromClass, toClass) {
  var from_list= document.getElementsByClassName(fromClass);
  var to_list = document.getElementsByClassName(toClass);

  var tmp;
  for(var i = 0; i < from_list.length; i++) {
      //swap logic      
      if (from_list[i].type == "checkbox") {
          tmp = from_list[i].checked;
          from_list[i].checked = to_list[i].checked;
          to_list[i].checked = tmp;      
      } else {
        tmp = from_list[i].value;
        from_list[i].value = to_list[i].value;
        to_list[i].value = tmp;
      }
  }
}

JSFiddle：http://jsfiddle.net/1cgeyyb0/1/