добавление строк в несколько таблиц HTML с использованием JS - PullRequest
Новая
       7

добавление строк в несколько таблиц HTML с использованием JS

0 голосов
/ 08 апреля 2020

Я пытаюсь добавить строки в несколько таблиц в файле HTML, используя JS. Сейчас есть 3 таблицы. Когда я пытаюсь нажать кнопку «Добавить» в каждой таблице, строки добавляются во все 3 таблицы, но мне нужно только добавлять строки в каждую таблицу каждый раз. Я только начал узнавать о HTML JQuery et c. был бы признателен за любой данный совет. Заранее спасибо!

Вот так выглядят мои файлы JS и HTML: 

$(document.getElementById("table1")).ready(function() {
  $("#newrows").click(function() {
    var addcontrols = "<tr>"
    addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols += "<td><input type='text' name='naiyou'></td>"
    addcontrols += "</tr>";
    $("table tbody").append(addcontrols);
  });
});

$(document.getElementById("table2")).ready(function() {
  $("#newrow").click(function() {
    var addcontrols1 = "<tr>"
    addcontrols1 += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols1 += "<td><input type='text' name='naiyou'></td>"
    addcontrols1 += "</tr>";
    $("table tbody").append(addcontrols1);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrows" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>

    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信">

Ответы [ 3 ]

0 голосов
/ 08 апреля 2020

Проблема в том, что вы добавляете все элементы table tbody, когда происходит щелчок. Вам необходимо использовать обход DOM, чтобы связать нажатую кнопку с целью tbody. В этом случае вы можете сделать это, используя closest() и find().

. Следует также отметить, что у вас неправильный синтаксис обработчика document.ready, и должен быть только один из них. Также вы используете дубликаты id атрибутов, которые недопустимы. Вместо этого группируйте элементы с общим поведением по классу. Наконец, вам не хватает закрывающей > для элемента кнопки.

С учетом всего сказанного попробуйте следующее: 

jQuery($ => {
  const addcontrols = '<tr><td><input type="text" name="jikan" placeholder="Enter time"></td><td><input type="text" name="naiyou"></td></tr>';
    
  $(".newrows").on('click', function() {
    $(this).closest('table').find('tbody').append(addcontrols);
  });
});
.newrows {
width:500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信" />
</p>
0 голосов
/ 08 апреля 2020

Вы можете использовать следующий код: 

$(document.getElementById("table1")).ready(function() {
      $("#newrows").click(function() {
      var parentTable  = $(this).closest("table")
        var addcontrols = "<tr>"
        addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
        addcontrols += "<td><input type='text' name='naiyou'></td>"
        addcontrols += "</tr>";
        parentTable.append(addcontrols);
      });
    });

    $(document.getElementById("table2")).ready(function() {
      $("#newrow").click(function() {
      var parentTable  = $(this).closest("table")
        var addcontrols1 = "<tr>"
        addcontrols1 += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
        addcontrols1 += "<td><input type='text' name='naiyou'></td>"
        addcontrols1 += "</tr>";
        parentTable.append(addcontrols1);
      });
    });

Но будет лучше, если вы будете использовать общий класс вместо id. Это будет более чисто, и простой блок кода выполнит задачу. Просто используйте class = "newrows" в каждой кнопке добавления и используйте следующий код. Пример:

HTML: 

<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" class="newrows" value="Add" id="newrows" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" class="newrows" value="Add" id="newrow" style="width:500px" </td>

    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信">

Jquery: 

$(document).ready(function() {
  $(document).on("click",".newrows",function() {
    var parentTable  = $(this).closest("table")
    var addcontrols = "<tr>"
    addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols += "<td><input type='text' name='naiyou'></td>"
    addcontrols += "</tr>";
    parentTable.append(addcontrols);
  });
});
0 голосов
/ 08 апреля 2020

Вы можете объединить обе функции в одну и указать более точно c о том, куда добавить что-то вроде этого: 

$(".newrow").click(function() { // class selector instead for reusability
    let addcontrols = "<tr>" // use let or const instead
    addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols += "<td><input type='text' name='naiyou'></td>"
    addcontrols += "</tr>";

    $(this).closest("table").find("tbody").append(addcontrols); // $(this) is the clicked element
});
...