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

Question

我有一个表，我想在其中添加第一行第三列中提交的多个输入。如果我单击添加 pk1 按钮，它不会添加到特定的 td 中，即 <td class=partition1>有使用 jQuery 或 Javascript 的解决方案吗？输入必须在显示中添加: block 模式而不是内联模式。使用 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 列，而您想要添加 <th>在第 3 列和第 4 列之间。
• 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>