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

问题描述 投票:0回答:1

我有一个表,我想在其中添加第一行第三列中的多个输入。如果我单击添加pk1按钮,它不会被添加到特定的td中,即<td class=partition1>使用jQuery或Javascript的任何解决方案?输入必须以display:block模式而不是inline模式添加。这是使用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/

javascript html jquery css dom
1个回答
1
投票

正如@Taplar之前所说,您的代码有多个问题,因此我不会一一讨论。但我会提到一些著名的。

© www.soinside.com 2019 - 2024. All rights reserved.