如何在特定单元格或表格的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&nbsp;在 HTML 中不是一个唯一的类，所以每当你尝试向它添加一些东西时，它都会在两个不同的位置添加。这是一个修复程序，供您寻找：$('.add-pkey1').on('click', function() {&nbsp; $('.partition1.column3').append('<input type="text" name="input1" value="test" />');})&nbsp;table {&nbsp; &nbsp; border-collapse: collapse;&nbsp; &nbsp; margin: 1em;}thead {&nbsp; &nbsp; background-color: lightblue;}td,th {&nbsp; &nbsp; border: solid grey 1px;&nbsp; &nbsp; padding: 1em;&nbsp; &nbsp; text-align: center;}&nbsp;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="table-id">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan="6" class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; <span>Source : </span>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>input1</th>&nbsp; &nbsp; &nbsp; <th>input2</th>&nbsp; &nbsp; &nbsp; <th class="partition1">Partition1</th>&nbsp; &nbsp; &nbsp; <th class="partition2">&nbsp; &nbsp; &nbsp; &nbsp; Partition2&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input id="input1" type="text" name="input1" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input id="input2" type="text" name="input2" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="partition1 column3">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="partition" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="partition2">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="partition2" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><button class="add-pkey1">add pk1</button>