Копировать Вставить несколько строк из CSV в поля ввода в форме HTML

Question

Я пытаюсь скопировать данные вставки из файла CSV в форму HTML, используя Jquery. Моя форма содержит массив полей ввода, поэтому я могу одновременно выполнять несколько вставок при отправке

Теперь предположим, что я скопировал несколько вставок из файла CSV во второй столбец первой строки в форме, первая строка формы показывает данные правильно, но во второй строке вставленные данные начинаются с самого первого столбца, причем они должны начинаться со второй строки, как это было в первой строке формы

CSV строки и ячейки

1   4   a
2   5   b
3   6   c

Снимок экрана

            function csv_paste_datagrid(event){
                $(document).ready(function() {
                    $('input').bind('paste', null, function (e) {
                        $this = $(this);
                        setTimeout(function () {
                            var columns = $this.val().split(/\s+/);
                            var i;
                            var input = $this;
                            for (i = 0; i < columns.length; i++) {
                                input.val(columns[i]);
                                if( i % 3 !== 2){
                                    input = input.parent().parent().parent().parent().parent().next().find('input');
                                    } else{
                                    input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
                                }
                            }
                        }, 0);
                    });
                });

HTML

            <form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
               <table style="display : inline;width : 100%;"></table>
               <table id="" class="system_form_tables_parent">
                  <tbody>
                     <tr>
                        <th></th>
                        <td>
                           <table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
                              <tbody>
                                 <tr>
                                    <td style=" " id="container_validation_options[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_validation_options[0]" style="">
                                                <th class="th_class1"><span class=""> validation_options  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                    <td style=" " id="container_validation_display[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_validation_display[0]" style="">
                                                <th class="th_class1"><span class=""> validation_display  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                    <td style=" " id="container_blocked_modules[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_blocked_modules[0]" style="">
                                                <th class="th_class1"><span class=""> blocked_modules  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td style=" " id="container_validation_options[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_validation_options[1]" style="">
                                                <th class="th_class1"><span class=""> validation_options  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                    <td style=" " id="container_validation_display[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_validation_display[1]" style="">
                                                <th class="th_class1"><span class=""> validation_display  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                    <td style=" " id="container_blocked_modules[0]">
                                       <table>
                                          <tbody>
                                             <tr id="tr_blocked_modules[1]" style="">
                                                <th class="th_class1"><span class=""> blocked_modules  </span></th>
                                             </tr>
                                             <tr>
                                                <td class="td_class">   <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <th></th>
                                             </tr>
                                             <tr>
                                                <td class="val_error"></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                                 <tr style="">
                                    <td style="text-align : left;padding-left:0.5em">
                                       <table id="submit_table">
                                          <tbody>
                                             <tr>
                                                <td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
                                                   <input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
                                                   <input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
                                                </td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </form>

Answer 1

Правильно, сначала мне пришлось очистить несколько двойных id с от вашего HTML, а также добавить атрибут класса (contTD) в ваш "основной" контейнер <td> с. После этого все довольно легко встало на свои места:

• , чтобы предотвратить вставку фактического текста TSV непосредственно в первое поле ввода, которое я использовал e.preventDefault()
• Затем я использовал .split() дважды в строке TSV, чтобы превратить ее в двумерный массив vals
• Я идентифицировал элемент .closest() td.contTD (-> td) и номера его столбцов и строк (col и row) путем нахождения .index() из td и его родительской строки.
• начиная с .closest('tbody') Затем я снова прошел вниз по .slice() строкам, начинающимся с row, и его (нарезанным) дочерним элементам ввода, начинающимся со столбца col.
• в .each() l oop Затем я присвоил значение vals -массива элементу ввода, но только если существует val[i][j]!

Возможны дальнейшие улучшения к сценарию, так как он будет выполняться через все <tr> таблицы от строки row до конца. Но я надеюсь, что это отправная точка для вас, и она дала вам еще несколько идей о том, как работать с jquery.

. В моем сценарии я использовал делегированную привязку вставки-события к <form> элемент. Это должно хорошо работать с динамической таблицей c. Я не упаковал это в дополнительную функцию. Но, конечно, когда вы используете его на своем сайте, он должен быть помещен в ваш раздел загрузки.

И, наконец, во втором .split() я ищу символ табуляции в качестве разделителя столбцов, поэтому этот пример будет работать с форматом файла TSV. Если вы хотите применить его к значениям, разделенным пробелами или запятыми, вы должны адаптировать регулярное выражение там к чему-то вроде /\s/ или /,/.

$('form').on('paste', 'input', function (e) {
  e.preventDefault(); // do not paste the contents into the first cell ...
  // convert TSV from clipboard into a 2D array:
  let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
  let td=$(this).closest('.contTD'); // closest  container TD and work from there
  let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
  // modify input fields of rows >= row and columns >= col: 
  tbdy.children('tr').slice(row).each((i,tr)=>{
    $(tr).find('td input:text').slice(col).each((j,ti)=>{
     if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] } 
  )});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
  <table style="display : inline;width : 100%;"></table>
  <table id="" class="system_form_tables_parent">
    <tbody>
        <tr>
          <th></th>
          <td>
            <table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
              <tbody>
                  <tr>
                    <td class="contTD"><table>
                      <tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
                      <tr><td class="td_class"><input type="text" value="00A"> </td></tr>
                      <tr><th></th></tr>
                      <tr><th></th></tr>
                      <tr><td class="val_error"></td></tr></tbody>
                    </table></td>
                    <td class="contTD" id="container_validation_options[0]">
                        <table>
                          <tbody>
                              <tr id="tr_validation_options[0]">
                                <th class="th_class1"><span class=""> validation_options  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                    <td class="contTD" id="container_validation_display[0]">
                        <table>
                          <tbody>
                              <tr id="tr_validation_display[0]">
                                <th class="th_class1"><span class=""> validation_display  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                    <td class="contTD" id="container_blocked_modules[0]">
                        <table>
                          <tbody>
                              <tr id="tr_blocked_modules[0]">
                                <th class="th_class1"><span class=""> blocked_modules  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                  </tr>
                  <tr>
                    <td class="contTD"><table>
                      <tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
                      <tr><td class="td_class"><input type="text" value="00A"> </td></tr>
                      <tr><th></th></tr>
                      <tr><th></th></tr>
                      <tr><td class="val_error"></td></tr></tbody>
                    </table></td>
                    <td class="contTD" id="container_validation_options[1]">
                        <table>
                          <tbody>
                              <tr id="tr_validation_options[1]">
                                <th class="th_class1"><span class=""> validation_options  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                    <td class="contTD" id="container_validation_display[1]">
                        <table>
                          <tbody>
                              <tr id="tr_validation_display[1]">
                                <th class="th_class1"><span class=""> validation_display  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                    <td class="contTD" id="container_blocked_modules[1]">
                        <table>
                          <tbody>
                              <tr id="tr_blocked_modules[1]">
                                <th class="th_class1"><span class=""> blocked_modules  </span></th>
                              </tr>
                              <tr>
                                <td class="td_class">   <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <th></th>
                              </tr>
                              <tr>
                                <td class="val_error"></td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                  </tr>
                  <tr>
                    <td style="text-align : left;padding-left:0.5em">
                        <table id="submit_table">
                          <tbody>
                              <tr>
                                <td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
                                    <input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
                                    <input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
                                </td>
                              </tr>
                          </tbody>
                        </table>
                    </td>
                  </tr>
              </tbody>
            </table>
        </td>
      </tr>
  </tbody>
</table>
</form>