如何在特定单元格或表格的td中添加多个输入？

Question

我有一个表，我想在其中添加在第一行的第三列中归档的多个输入。如果我点击添加pk1按钮，它不会被添加到特定的td中，这是使用jQuery或Javascript的任何解决方案吗？输入必须添加到 display：block 模式中，而不是在内联模式下。哪个是使用Jquery或javascript处理这个问题的最简单方法？<td class=partition1>$('.add-pkey1').on('click','.partition1' ,function(){var t0 = $('.partition1').append('<input type="text" name="input1" value="test" />');            $('#table-id').append(t0);}) table {    border-collapse: collapse;    margin: 1em;}thead {    background-color: lightblue;}td,th {    border: solid grey 1px;    padding: 1em;    text-align: center;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table          id="table-id"         >          <thead >            <tr>              <th colspan="6" class="text-center">                <span>Source : </span>              </th>            </tr>            <tr>              <th>input1</th>              <th>input2</th>              <th class="partition1">Partition1</th>              <th class="partition2">                Partition2              </th>            </tr>          </thead>          <tbody>            <tr>              <td>                <input                  id="input1"                  type="text"                  name="input1"                />              </td>              <td>                <input                  id="input2"                  type="text"                  name="input2"                />              </td>              <td class="partition1">                <input                  type="text"                  name="partition"                      />              </td>              <td class="partition2">                <input                  type="text"                  name="partition2"                />              </td>            </tr>          </tbody>        </table><button class="add-pkey1">add pk1</button>

Answer 1

正如@Taplar之前所说，您的代码存在多个问题，因此我不会逐个讨论它们。但我会提到那些值得注意的。

• .on()将接受事件，选择器，数据和处理程序，但在您的情况下，您只需要其中两个，因此它应该而不是当前版本。.on('click', function(){})

• 为了将元素添加到第三列，您需要做的就是获取特定于元素的类或id，并将所需的元素附加到其中。但是你在那里做了什么会导致将另一个<th>追加到你的表中，这意味着它会自动将新元素添加到新行中，并且会破坏表结构，因为有4列，并且你想在第3列和第4列之间添加。<th>

• partition1 在 HTML 中不是一个唯一的类，所以每当你尝试向它添加一些东西时，它都会在两个不同的位置添加。

这是一个修复程序，供您寻找：

$('.add-pkey1').on('click', function() {

  $('.partition1.column3').append('<input type="text" name="input1" value="test" />');

})

 table {

    border-collapse: collapse;

    margin: 1em;

}

thead {

    background-color: lightblue;

}

td,

th {

    border: solid grey 1px;

    padding: 1em;

    text-align: center;

} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table-id">

  <thead>

    <tr>

      <th colspan="6" class="text-center">

        <span>Source : </span>

      </th>

    </tr>

    <tr>

      <th>input1</th>

      <th>input2</th>

      <th class="partition1">Partition1</th>

      <th class="partition2">

        Partition2

      </th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>

        <input id="input1" type="text" name="input1" />

      </td>

      <td>

        <input id="input2" type="text" name="input2" />

      </td>

      <td class="partition1 column3">

        <input type="text" name="partition" />

      </td>

      <td class="partition2">

        <input type="text" name="partition2" />

      </td>

    </tr>

  </tbody>

</table>

<button class="add-pkey1">add pk1</button>