Добавление строки в другую таблицу после нажатия кнопки «Добавить новую строку» - PullRequest
Новая
       0

Добавление строки в другую таблицу после нажатия кнопки «Добавить новую строку»

0 голосов
/ 08 мая 2020

Я учусь в Django, javascript и HTML. Я разрабатываю веб-сайт, который на самом деле помогает заполнить передачу смены (если компания работает посменно, то сотрудники в текущей смене должны передать смену следующему человеку, объясняя незавершенные задачи, которые необходимо выполнить, запланированные задачи / действия в его / ее сдвиг .. эт c). При этом я столкнулся с проблемой.

Я написал 6 HTML файлов для 6 таблиц отдельно. И я написал функции добавления новой строки, редактирования, сохранения и удаления для 6 таблиц с помощью одного jquery скрипта. Теперь мне нужно включить все 6 таблиц в один файл HTML и связать этот один сценарий jquery, чтобы все функции (добавление, удаление, редактирование и сохранение) работали индивидуально для 6 таблиц.

Но здесь, если я нажимаю кнопку добавления новой строки в одной таблице, строка добавляется в другую таблицу. Пожалуйста, помогите в этом.

HTML Код для двух таблиц (идентификатор таблицы1 - DynamicTable5, идентификатор таблицы2 - DynamicTable6) 

"use strict";
function IterarCamposEdit(t, n) {
  function i(t) {
    if (null == colsEdi) return !0;
    for (var n = 0; n < colsEdi.length; n++) if (t == colsEdi[n]) return !0;
    return !1;
  }
  var o = 0;
  t.each(function () {
    o++, "buttons" != $(this).attr("name") && i(o - 1) && n($(this));
  });
}
function FijModoNormal(t) {
  $(t).parent().find("#bAcep").hide(),
    $(t).parent().find("#bCanc").hide(),
    $(t).parent().find("#bEdit").show(),
    $(t).parent().find("#bElim").show(),
    $(t).parents("tr").attr("id", "");
}
function FijModoEdit(t) {
  $(t).parent().find("#bAcep").show(),
    $(t).parent().find("#bCanc").show(),
    $(t).parent().find("#bEdit").hide(),
    $(t).parent().find("#bElim").hide(),
    $(t).parents("tr").attr("id", "editing");
}
function ModoEdicion(t) {
  return "editing" == t.attr("id");
}
function rowAcep(t) {
  var n = $(t).parents("tr"),
    i = n.find("td");
  ModoEdicion(n) &&
    (IterarCamposEdit(i, function (t) {
      var n = t.find("input").val();
      t.html(n);
    }),
    FijModoNormal(t),
    params.onEdit(n));
}
function rowCancel(t) {
  var n = $(t).parents("tr"),
    i = n.find("td");
  ModoEdicion(n) &&
    (IterarCamposEdit(i, function (t) {
      var n = t.find("div").html();
      t.html(n);
    }),
    FijModoNormal(t));
}
function rowEdit(t) {
  var n = $(t).parents("tr"),
    i = n.find("td");
  ModoEdicion(n) ||
    (IterarCamposEdit(i, function (t) {
      var n = t.html(),
        i = '<div style="display: none;">' + n + "</div>",
        o = '<input class="form-control input-sm"  value="' + n + '">';
      t.html(i + o);
    }),
    FijModoEdit(t));
}
function rowElim(t) {
  $(t).parents("tr").remove(), params.onDelete();
}
function rowAgreg() {
  if (0 == $tab_en_edic.find("tbody tr").length) {
    var t = "";
    (i = $tab_en_edic.find("thead tr").find("th")).each(function () {
      "buttons" == $(this).attr("name")
        ? (t += colEdicHtml)
        : (t += "<td></td>");
    }),
      $tab_en_edic.find("tbody").append("<tr>" + t + "</tr>");
  } else {
    var n = $tab_en_edic.find("tr:last");
    n.clone().appendTo(n.parent());
    var i = (n = $tab_en_edic.find("tr:last")).find("td");
    i.each(function () {
      "buttons" == $(this).attr("name") || $(this).html("");
    });
  }
}
function TableToCSV(t) {
  var n = "",
    i = "";
  return (
    $tab_en_edic.find("tbody tr").each(function () {
      ModoEdicion($(this)) && $(this).find("#bAcep").click();
      var o = $(this).find("td");
      (n = ""),
        o.each(function () {
          "buttons" == $(this).attr("name") || (n = n + $(this).html() + t);
        }),
        "" != n && (n = n.substr(0, n.length - t.length)),
        (i = i + n + "\n");
    }),
    i
  );
}
var $tab_en_edic = null,
  params = null,
  colsEdi = null,
  newColHtml =
    '<div class="btn-group pull-right"><button id="bEdit" type="button" class="btn btn-sm btn-default" onclick="rowEdit(this);"><span class="glyphicon glyphicon-pencil" > </span></button><button id="bElim" type="button" class="btn btn-sm btn-default" onclick="rowElim(this);"><span class="glyphicon glyphicon-trash" > </span></button><button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowAcep(this);"><span class="glyphicon glyphicon-ok" > </span></button><button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;" onclick="rowCancel(this);"><span class="glyphicon glyphicon-remove" > </span></button></div>',
  colEdicHtml = '<td name="buttons">' + newColHtml + "</td>";
$.fn.SetEditable = function (t) {
  var n = {
    columnsEd: null,
    $addButton: null,
    onEdit: function () {},
    onDelete: function () {},
    onAdd: function () {},
  };
  (params = $.extend(n, t)),
    this.find("thead tr").append('<th name="buttons"></th>'),
    this.find("tbody tr").append(colEdicHtml),
    ($tab_en_edic = this),
    null != params.$addButton &&
      params.$addButton.click(function () {
        rowAgreg();
      }),
    null != params.columnsEd && (colsEdi = params.columnsEd.split(","));
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>
      Dynamic Editable HTML Table using Javascript, Jquery and Bootstrap with
      add, edit, and Delete Options
    </title>
    <!-- CSS files-->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- page content -->
    <br />
    <h1 class="col-md-12 text-center" style="color: black;">Current Shift</h1>

    <br />
    <div class="table-responsive col-md-10">
      <table
        class="table table-bordered table-striped table-hover table-condensed text-center"
        id="DyanmicTable5"
      >
        <thead>
          <tr>
            <th class="text-center">
              Current shift
            </th>
            <th class="text-center">
              Shift handedover to
            </th>
            <th class="text-center">
              Associates names in current shift
            </th>
            <th class="text-center">
              Associate names in Next Shift
            </th>
            <th class="text-center">
              Shift Handover time
            </th>
            <th class="text-center">
              <button id="addNewRow" class="btn btn-primary btn-sm">
                Add New Row
              </button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              First
            </td>
            <td>
              Second
            </td>
            <td>
              Sushma, &nbsp;Saikiran
            </td>
            <td>
              Venkat
            </td>
            <td>
              15:30
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br /><br /><br />
    <div class="table-responsive col-md-10">
      <table
        class="table table-bordered table-striped table-hover table-condensed text-center"
        id="DyanmicTable6"
      >
        <thead>
          <tr>
            <th class="text-center">
              S.No
            </th>
            <th class="text-center">
              Tasks List
            </th>
            <th class="text-center">
              Monitored in First Shift
            </th>
            <th class="text-center">
              Monitored in Second shift
            </th>
            <th class="text-center">
              Monitored in Third SHift
            </th>
            <th class="text-center">
              <button id="addNewRow2" class="btn btn-primary btn-sm">
                Add New Row
              </button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              1
            </td>
            <td>
              Monitored Netcool, InfoVista, Cramer, IT IS, DBA, RTMT
              applications
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              2
            </td>
            <td>
              Sending Health Checklists and Reports
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              3
            </td>
            <td>
              Upload Health Checklists in sharepoint
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              4
            </td>
            <td>
              Monitoring Remedy and Updating AMS tracker
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              5
            </td>
            <td>
              GNO TF AMS Master tickets tracker Conciliation aganist remedy
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              6
            </td>
            <td>
              Creating Incidents and SRs on behalf of customers when you got
              mail
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              7
            </td>
            <td>
              Creating P3 incidents for disk usage exceeds 95%
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              8
            </td>
            <td>
              Creating related requests for user created requests
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              9
            </td>
            <td>
              Number of critical alerts noticed
            </td>
            <td>
              7
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              10
            </td>
            <td>
              Number of major alerts noticed
            </td>
            <td>
              4
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              11
            </td>
            <td>
              Number of tickets created for critical alerts
            </td>
            <td>
              1
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              12
            </td>
            <td>
              DC Sharepoint
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
          <tr>
            <td>
              13
            </td>
            <td>
              Continous frequency
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
            <td>
              Yes
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!--JS Files-->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"
    ></script>
    <script src="bootstable.min.js"></script>

    <script>
      $("#DyanmicTable5").SetEditable({ $addButton: $("#addNewRow") });
    </script>

    <script>
      $("#DyanmicTable6").SetEditable({ $addButton: $("#addNewRow2") });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...