Question

我对JavaScript很陌生，所以想问一个非常简单的基本问题。我有HTML，如下所示：

<html>

<body>
  <table border="1">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>CellOneRowOne</td>
      <td>CellTwoRowOne</td>
      <td>>>></td>
      <td>CellFourRowOne</td>
    </tr>
  </table>
</body>

</html>

我想编写一个JavaScript函数，以便当用户点击行的单元格3中显示的箭头时，来自cell-1 row-1的值将被复制到cell-4 row-1。

Answer 1

您需要通过JavaScript访问所涉及的3个元素，然后设置要单击的单元格，以便能够通过获取一个单元格值并将其放入另一个单元格来响应被单击。

  <html>
  <head>
    <script>
        var c1r1 = document.getElementById("c1r1");
        var cellToClick = document.getElementById("cellToClick");
        var c4r1 = document.getElementById("c4r1");

        cellToClick.addEventListener("click", function(){
           c4r1.innerHTML = c1r1.innerHTML;
        });
    </script>
  </head>
 <body>
  <table border="1">
   <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
   </tr>
   <tr>
    <td id="c1r1">CellOneRowOne</td>
    <td>CellTwoRowOne</td>
    <td id="cellToClick">>>></td>
    <td id="c4r1">CellFourRowOne</td>
   </tr>
  </table>
 </body>
 </html>

Answer 2

这是JS和HTML代码。请注意，您可以将“copy_vals”函数用于任何其他行，前提是其输入参数等于行的相同索引，包括函数调用。

根据当前的环境，作为一个新手，你可能希望发明在任何情况下都可以发明的策略（这里，无论行索引是什么）。

如你所见，我曾经写过一次，我把它叫了两次：努力越少，越有能力！（正如我想说的那样）

快乐的编码！

@RunWith(Arquillian.class)
public class MyServiceIT {

    @ArquillianResource
    private URL webappUrl;

    @Deployment()
    public static WebArchive createDeployment() {
        return ShrinkWrap.create(WebArchive.class)
            .addClasses(MyService.class)
            .addAsWebInfResource("META-INF/persistence.xml") //Refers to src/main/resources/META-INF/persistence.xml
            .addAsWebInfResource("test-resources.xml", "resources.xml") //Refers to src/test/resources/test-resources.xml
            .addAsWebInfResource(EmptyAsset.INSTANCE, "beans.xml");
    }

    @Test
    public void randomTest() throws URISyntaxException {
        //Get data from the web service.
        Client client = ClientBuilder.newClient();
        WebTarget webTarget = client.target(webappUrl.toURI().resolve("myentity"));
        Response response = webTarget.request(MediaType.APPLICATION_JSON).get();
        int status = response.getStatus();
        List<MyEntity> myEntities = response.readEntity(new GenericType<List<MyEntity>>() {});

        //Perform some tests on the data
    }
}

function copy_vals(_row_id) {
  var _src = document.getElementById("cell" + _row_id + "_1");
  var _dest = document.getElementById("cell" + _row_id + "_4");
  _dest.innerHTML = _src.innerHTML;
}

Answer 3

这会为每个箭头添加一个事件，这不是最高效的选择，但如果您的表格/页面很小，则无关紧要并且更容易管理代码。

＆＃13;

function copyCell(e)
{  
  var link = this,
      td = link.parentNode,
      tr = td.parentNode,
      cells = tr.children;
  
  cells[3].innerHTML = cells[0].innerHTML;
  
}

var links = document.querySelectorAll('td:nth-child(3) :link');

for (var i=0,n=links.length; i<n; i++){
  var link = links[i];
  link.addEventListener('click', copyCell, false);
}

＆＃13;

td { text-align: center; }
td:nth-child(3) :link{ text-decoration: none; }

＆＃13;

<html>

<body>
  <table border="1">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>CellOneRowOne</td>
      <td>CellTwoRowOne</td>
      <td><a href="#" onclick="javascript:return false;">&rarr;</span></td>
      <td>CellFourRowOne</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td><a href="#" onclick="javascript:return false;">&rarr;</span></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

＆＃13;

表中的Javascript复制单元格值

3 个答案: