Как добавить несколько входов в определенную c ячейку или таблицу td?

Question

У меня есть одна таблица, в которую я хочу добавить несколько полей ввода в 3-м столбце 1-й строки. если я нажму кнопку добавления pk1, он не будет добавлен в указанный c 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(){}) вместо текущей версии.
• Чтобы добавить элемент в третий столбец, все, что вам нужно сделать, это получить класс или идентификатор элемента c и добавить желаемый элемент в него. Но то, что вы там сделали, приведет к добавлению еще одного <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>