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

Question

我有一个表，我想在其中添加多个输入字段的第一行第三列。 如果我单击添加 pk1 按钮，它不会被添加到特定的 td 中，即<td class=partition1> 任何使用 jQuery 或 Javascript 的解决方案？输入必须在显示中添加：块模式而不是内联模式。 使用 Jquery 或 javascript 处理此问题的最简单方法是什么？

$('.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>

JsFiddle : - https://jsfiddle.net/shreekantbatale2/zfus24m9/1/

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>