时间戳

首页 > 解决方案 > 在下面添加行时更改单元格值

javascript - 在下面添加行时更改单元格值

问题描述

我有一个带有按钮的 HTML 表格，用于在选择按钮的行下方添加行。此表是从 SQL 数据库填充的。这个想法（仍在整个项目上工作）是仅更新单击按钮的值。

表结构示例：

在此处输入图像描述

选择第一行的按钮时：

在此处输入图像描述

这个想法是在单击按钮的编辑列以及新创建的行中添加一个刻度线。

这是我添加新行的代码：

function addRows() {
  var formcbResult = "12345"
  $(document).on("click", '.splitBtn', function() {
    $(this).closest('tr').insertBefore($('<tr><td><button class="delButton" style="width: 40px; font-size: 10px; padding: 1px" onclick="deleteRow()">Delete</button></td><td>' + formcbResult + '</td><td>Date</td><td></td><td><input type="text" name="SplitID" style="padding: 2px; width: 100%"></td><td></td><td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;"></td><td></td><td id="edited">a</td></tr>').insertBefore($(this).closest('tr')));
    $(this).closest('tr').remove(1);
  });
}

function deleteRow() {
  $(document).on('click', '.delButton', function() {
    $(this).closest('tr').remove();
  });
}

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}
body {
  font-family: 'Calibri';
}

table th,
table td {
  border: solid 1px;
  border-collapse: collapse;
  border-color: #B7A775;
  padding: 2px 7px;
  font-family: 'Calibri';
  width: auto;
}

th {
  background-color: #4B4E53;
  color: #FFFFFF;
  text-align: left;
}

#bankdescription {
  width: 300px;
}

#banktable {
  border: solid 1px;
  border-collapse: collapse;
}

h1 {
  color: #1E1E1E;
}

#edited {
  font-family: 'Webdings';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Accounts</h1>
<div class="fixed">
  <table id="banktable">
    <tbody>
      <tr>
        <th></th>
        <th>Account</th>
        <th>Date</th>
        <th>Entry</th>
        <th>Description</th>
        <th>Ref</th>
        <th>Amount</th>
        <th>Balance</th>
        <th name="modVersion">Edit</th>
      </tr>
      <tr>
        <td><button type="button" id="SplitButton" class="splitBtn" onclick="addRows(this)">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">1</td>
        <td name="description" id="description"><input style="width: 100%;" value="Row 1 description"></td>
        <td>Ref 1</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="0"></td>
        <td style="text-align: right;">balance 1</td>
        <td id="editTable"></td>
      </tr>
      <tr>
        <td><button type="button" id="SplitButton" class="splitBtn" onclick="addRows(this)">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">2</td>
        <td name="bankdescription" id="bankdescription"><input style="width: 100%;" value="Row 2 description"></td>
        <td>Ref 2</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="value2"></td>
        <td>balance 2</td>
        <td></td>
      </tr>
    </tbody>
  </table>

如果有其他方法可以实现这一目标，我愿意接受建议。

标签： javascripthtml

解决方案

像这样的东西

$(document).on("click", '.delButton', function() {
  $(this).closest("tr").remove()
})
$(document).on("onkeypress", '.amt', function(event) {
  return isNumberKey(event)
})
$(document).on("click", '.splitBtn', function() {
  var formcbResult = "some text"
  var $row = $('<tr><td><button class="delButton">Delete</button></td><td>' + formcbResult + '</td><td></td><td></td><td><input type="text" name="SplitID"></td><td></td><td><input class="amt" name="changableAmount"></td><td></td><td class="edited">a</td></tr>')
  $(this).closest('tr').after($row)
});
.delButton {
  width: 40px;
  font-size: 10px;
  padding: 1px;
}

[name=SplitID] {
  padding: 2px;
  width: 100%
}

.amt {
  width: 110px;
  text-align: right;
}

.edited::after {
  content: "✓";
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Accounts</h1>
<div class="fixed">
  <table id="banktable">
    <tbody>
      <tr>
        <th></th>
        <th>Account</th>
        <th>Date</th>
        <th>Entry</th>
        <th>Description</th>
        <th>Ref</th>
        <th>Amount</th>
        <th>Balance</th>
        <th name="modVersion">Edit</th>
      </tr>
      <tr>
        <td><button type="button" class="splitBtn">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">1</td>
        <td name="description" id="description"><input style="width: 100%;" value="Row 1 description"></td>
        <td>Ref 1</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="0"></td>
        <td style="text-align: right;">balance 1</td>
        <td id="editTable"></td>
      </tr>
      <tr>
        <td><button type="button" class="splitBtn" >Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">2</td>
        <td name="bankdescription" id="bankdescription"><input style="width: 100%;" value="Row 2 description"></td>
        <td>Ref 2</td>
        <td><input classs="amt" name="changableAmount" value="value2"></td>
        <td>balance 2</td>
        <td></td>
      </tr>
    </tbody>
  </table>

推荐阅读