Question

我有一个具有以下结构的表：

<table>
  <tr>
    <td>
      <input type="text" value="abc" />
    </td>
    <td>
      <input type="text" value="def" />
    </td>
    <td>
      <input type="text" value="ghi" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>
          123
        </option>
        <option selected="selected">
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
    <td>
      <select>
        <option>
          123
        </option>
        <option>
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
    <td>
      <select>
        <option>
          123
        </option>
        <option>
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" checked="checked" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

这里每行的所有3列分别是相似的元素。我现在想要将所有行的第1个td（用户所做的所有输入）中的内容复制到所有行的第2和第3列中的其他2个tds。

不幸的是，我不知道如何开始。

Fiddle

Answer 1

一种方式：

$("button").click(function() {
  copy();
});

function copy() {
  $('tr').each(function() {
    $(this).find('td :input:not(:first)').val($(this).find('td :input:first').val()).prop('checked', $(this).find('td :input:first').prop('checked'))
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" value="abc" />
    </td>
    <td>
      <input type="text" value="def" />
    </td>
    <td>
      <input type="text" value="ghi" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>
          123
        </option>
        <option selected="selected">
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
    <td>
      <select>
        <option>
          123
        </option>
        <option>
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
    <td>
      <select>
        <option>
          123
        </option>
        <option>
          456
        </option>
        <option>
          789
        </option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
    <td>
      <input type="radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

<button>
  Copy
</button>

TD的内容重复

1 个答案: