javascript - JS 在 codepen 中工作，但不在我的完整 HTML 文件的上下文中
问题描述
我对编码还是很陌生，所以不要粗暴地判断我的代码，但任何建议都值得赞赏！
我正在尝试使用电子构建预算跟踪器应用程序。我有一个交易列表（表），我想让用户在其中添加、编辑和保存行。我得到它（或多或少）在codepen中工作，但在我的完整html文件的上下文中没有任何反应，我不知道为什么。
我在结束正文标记之前链接了 js 文件（称为 table.js）。
我试过把我的 JS 包起来
$(document).ready(function (){
// your code goes here
});
可悲的是没有奏效。无论如何，这是代码：
表格 HTML（这个 + JS 在 codepen 中工作）：
<div class="five">
<h1>Transactions</h1>
<div class="txlist"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="10" border="0" width="1500" >
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="scroll" style="width:320px; height:80px; overflow:auto;">
<table cellspacing="0" cellpadding="15" border="0" width="1500" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td><input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<!--<input type="button" value="" class="delete" onclick="delete_row('')"></td>-->
<!-- Delete function = clear & hide input row -->
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="" class="delete" onclick="delete_row('3')">
</td>
</tr>
</table>
</div>
</table>
</div>
</div>
JS：
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var date=document.getElementById("date_row"+no);
var account=document.getElementById("account_row"+no);
var category=document.getElementById("category_row"+no);
var amount=document.getElementById("amount_row"+no);
var date_data=date.innerHTML;
var account_data=account.innerHTML;
var category_data=category.innerHTML;
var amount_data=amount.innerHTML;
date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>"; //Should input type here be date?
account.innerHTML="<input type='text' id='account_text"+no+"' value='"+account_data+"'>";
category.innerHTML="<input type='text' id='category_text"+no+"' value='"+category_data+"'>";
amount.innerHTML="<input type='text' id='amount_text"+no+"' value='"+amount_data+"'>";
}
function save_row(no)
{
var date_val=document.getElementById("date_text"+no).value;
var account_val=document.getElementById("account_text"+no).value;
var category_val=document.getElementById("category_text"+no).value;
var amount_val=document.getElementById("amount_text"+no).value;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("account_row"+no).innerHTML=account_val;
document.getElementById("category_row"+no).innerHTML=category_val;
document.getElementById("amount_row"+no).innerHTML=amount_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_date").value;
var new_country=document.getElementById("new_account").value;
var new_age=document.getElementById("new_category").value;
var new_age=document.getElementById("new_amount").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+new_date+"</td><td id='account_row"+table_len+"'>"+new_account+"</td><td id='category_row"+table_len+"'>"+new_category+"</td><td id='amount_row"+table_len+"'>"+new_amount+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_date").value="";
document.getElementById("new_account").value="";
document.getElementById("new_category").value="";
document.getElementById("new_amount").value="";
}
完整的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Net Worth</title>
</head>
<body>
<div class="wrapper">
<div class="one">
<div class="title">
<h1 class=accounts>Accounts</h1><br><button type=button class="edit" id="edit"></button>
</div>
<div class="Accounts">
<br><br><button type="button" class="collapsible"><h3 id="Accounts"> Fiat Accounts</h3></button>
<div class="content">
<div class="row"><h4 id="acc">Cash</h4><h4 id="balance">$5322.54</h4></div>
<div class="row"><h4 id="acc">Credit Card</h4><h4 id="balance">$1362.21</h4></div>
<div class="row"><h4 id="acc">Checking Account</h4><h4 id="balance">$4322.50</h4></div>
<div class="row"><h4 id="acc">Savings Account</h4><h4 id="balance">$12322.50</h4></div>
</div>
<div class="Stocks & Commodeties">
<br><button type="button" class="collapsible"><h3> Stocks & Commodeties</h3></button>
<div class="content">
<div class="row"><h4 id="acc">AAPL</h4><h4 id="balance">$12322.54</h4></div>
<div class="row"><h4 id="acc">DJ 50 Titans ETF</h4><h4 id="balance">$24322.21</h4></div>
<div class="row"><h4 id="acc">Physical Gold</h4><h4 id="balance">$1822.50</h4></div>
<div class="row"><h4 id="acc">Oil Certificates</h4><h4 id="balance">$5322.50</h4></div>
</div>
</div>
<div class="Digital Currencies">
<br><button type="button" class="collapsible"><h3> Digital Currencies</h3></button>
<div class="content">
<div class="row"><h4 id="acc">Bitcoin</h4><h4 id="balance">$2322.54</h4></div>
<div class="row"><h4 id="acc">Ethereum</h4><h4 id="balance">$4322.21</h4></div>
<div class="row"><h4 id="acc">Chainlink</h4><h4 id="balance">$1322.50</h4></div>
<div class="row"><h4 id="acc">0xBTC</h4><h4 id="balance">$322.54</h4></div>
<div class="row"><h4 id="acc">Uniswap</h4><h4 id="balance">$2322.21</h4></div>
<div class="row"><h4 id="acc">AAVE</h4><h4 id="balance">$822.50</h4></div>
</div>
</div>
</div>
</div>
<div class="two" id="two"><h2>$ 180,327.45</h2></div>
<div class="three">
<h1>Allocation</h1>
<div class="Allocation"><canvas id="myChart" width="50" height="50"></canvas></div>
</div>
<div class="four">
<h1>Net Worth</h1>
<div class="networth"><canvas id="myChart2" width="50" height="18"></canvas></div>
</div>
<div class="five">
<h1>Transactions</h1>
<div class="txlist"><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="10" border="0" width="1500" >
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="scroll" style="width:320px; height:80px; overflow:auto;">
<table cellspacing="0" cellpadding="15" border="0" width="1500" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td><input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<!--<input type="button" value="" class="delete" onclick="delete_row('')"></td>-->
<!-- Delete function = clear & hide input row -->
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr id="row4">
<td id="date_row4">24.08.2020</td>
<td id="account_row4">Credit Card</td>
<td id="category_row4">Expense: Clothing</td>
<td id="amount_row4">- $84.95</td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edt" onclick="edit_row('4')">
<input type="button" id="save_button4" value="Save" class="save" onclick="save_row('4')">
<input type="button" value="" class="delete" onclick="delete_row('4')">
</td>
</tr>
<tr id="row5">
<td id="date_row5">23.08.2020</td>
<td id="account_row5">Cash</td>
<td id="category_row5">Expense: Groceries</td>
<td id="amount_row5">- $25.23</td>
<td>
<input type="button" id="edit_button5" value="Edit" class="edt" onclick="edit_row('5')">
<input type="button" id="save_button5" value="Save" class="save" onclick="save_row('5')">
<input type="button" value="" class="delete" onclick="delete_row('5')">
</td>
</tr>
<tr id="row6">
<td id="date_row6">23.08.2020</td>
<td id="account_row6">Credit Card</td>
<td id="category_row6">Income: Salary</td>
<td id="amount_row6">+ $2500.00</td>
<td>
<input type="button" id="edit_button6" value="Edit" class="edt" onclick="edit_row('6')">
<input type="button" id="save_button6" value="Save" class="save" onclick="save_row('6')">
<input type="button" value="" class="delete" onclick="delete_row('6')">
</td>
</tr>
<tr id="row7">
<td id="date_row7">23.08.2020</td>
<td id="account_row7">Checking Account</td>
<td id="category_row7">Transfer: Savings Account</td>
<td id="amount_row7">- $500.00</td>
<td>
<input type="button" id="edit_button7" value="Edit" class="edt" onclick="edit_row('7')">
<input type="button" id="save_button7" value="Save" class="save" onclick="save_row('7')">
<input type="button" value="" class="delete" onclick="delete_row('7')">
</td>
</tr>
<tr id="row8">
<td id="date_row8">22.08.2020</td>
<td id="account_row8">Savings Account</td>
<td id="category_row8">Transfer: Checking Account</td>
<td id="amount_row8">+ $500.00</td>
<td>
<input type="button" id="edit_button8" value="Edit" class="edt" onclick="edit_row('8')">
<input type="button" id="save_button8" value="Save" class="save" onclick="save_row('8')">
<input type="button" value="" class="delete" onclick="delete_row('8')">
</td>
</tr>
</table>
</div>
</table>
</div>
</div>
<div class="six">
<img src="refresh.svg" alt="Refresh" />
<img src="sun.svg" alt="Light Mode" />
<img src="settings.svg" alt="Settings" />
</div>
</div>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
<script type="text/javascript" src="./table.js"></script>
<script type="text/javascript" src="./collapsible.js"></script>
<script type="text/javascript" src="./edit.js"></script>
<script type="text/javascript" src="./chart.js"></script>
<script type="text/javascript" src="./chart2.js"></script>
</body>
</html>
解决方案
我将注释掉您标记为 FULL HTML 的代码的第 11 行和第 12 行，然后如果成功，我将研究从文件中删除它的含义。– enhzflep
推荐阅读
- r - 如何删除由 ggplot2 中的错误栏创建的负值？
- c# - 从 C# 调用 DLL 函数时内存冲突
- docker - 访问远程服务器（GCE）上暴露的（通过docker）端口的问题
- r - 当使用 `checkpoint()` 从 MRAN 安装软件包时，`软件包在存储库中不可用并且不会被安装`
- angular - 使用 ionic 上的点击事件，根据用户需要多次生成组件
- excel - 在各种标题下方插入 Excel 中的文本
- pandas - 将多行附加到熊猫的单行中
- neo4j - Neo4j - 如何在全文索引中给予最近时间戳更多的权重？
- python - 是否可以从 CSV 文件的备用列中读取主列中的 NaN 值？
- sql - 将值添加到同一行