javascript中的split函数将数据添加到表中
我想从split函数向表中添加数据。但问题是,我输入的数据显示在一行一列中。有人能帮我解决这个问题吗 html正文javascript中的split函数将数据添加到表中,javascript,html,split,Javascript,Html,Split,我想从split函数向表中添加数据。但问题是,我输入的数据显示在一行一列中。有人能帮我解决这个问题吗 html正文 <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-togg
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#">Web Test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="form" style="margin-top: 50px;">
<div class="form">
<div class="form-group">
<label for="inputEmail3">Input</label>
<div class="">
<input type="text" class="form-control" id="transaction" placeholder="Input Transaction">
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default" onclick="addTransaction()">Add</button>
</div>
</div>
</div>
</div>
<div class="row">
<table id="table_trans" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Amount</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" value="Total Price" class="btn btn-success" />
</td>
<td id="area_total"></td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- /.container -->
<!-- script references -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
切换导航
输入
添加
名称
价格
数量
总价
这就是函数
<script>
function addRow(thetext) {
var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow = theTable.insertRow(-1); // tr
var newCell = newRow.insertCell(0); // td
var theText = document.createTextNode(thetext);
newCell.appendChild(thetext);
}
function addTransaction() {
var inputTags = document.getElementById('transaction').value;
var tags = inputTags.split(',');
for (var i in tags) {
addRow(tags[i]);
}
}
</script>
函数addRow(文本){
var theTable=document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow=theTable.insertRow(-1);//tr
var newCell=newRow.insertCell(0);//td
var theText=document.createTextNode(theText);
newCell.appendChild(文本);
}
函数addTransaction(){
var inputTags=document.getElementById('transaction')。值;
var tags=inputTags.split(',');
for(标签中的变量i){
addRow(标签[i]);
}
}
没有时间测试它,但从我看到的情况来看,您每次都插入一行。
“table.insertRow”,然后在新行“newRow.insertCell”中插入一个单元格
这意味着每次只使用一个单元格创建新行时。这意味着垂直显示
您应该仅在上为拆分数组中的第一个元素插入一行
大概是这样的:
function addRow(thetext,isFirst) {
var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow = null;
if(isFirst){
newRow = theTable.insertRow(-1); // tr
}else{
newRow = document.getElementById('table_trans').rows[0];
}
var newCell = newRow.insertCell(0); // td
var theText = document.createTextNode(thetext);
newCell.appendChild(thetext);
}
function addTransaction() {
var inputTags = document.getElementById('transaction').value;
var tags = inputTags.split(',');
for (var i in tags) {
if i=0{
addRow(tags[i],true);
}else{
addRow(tags[i],false);
}
}
}
但是仍然没有测试:)这样就可以了:
function addRow(tags)
{
var theTable = document.getElementById('table_trans');
var newRow = theTable.insertRow(-1);
for(var i=0;i<tags.length;i++)newRow.insertCell(i).appendChild(document.createTextNode(tags[i]));
}
function addTransaction()
{
addRow(document.getElementById('transaction').value.split(','));
}
函数addRow(标记)
{
var theTable=document.getElementById('table_trans');
var newRow=表格.insertRow(-1);
对于(var i=0;i函数addRow(thetextArray){
var theTable=document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow=theTable.insertRow(-1);//创建tr
var newCell,theText,i;
对于(i=0;i
function addRow(thetextArray) {
var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
var newRow = theTable.insertRow(-1); // create tr
var newCell, theText, i;
for(i=0; i<thetextArray.length; i++){
newCell = newRow.insertCell(); // td
theText = document.createTextNode(thetext);
newCell.appendChild(thetext);
}
}
function addTransaction() {
var inputTags = document.getElementById('transaction').value;
addRow(inputTags.split(","));//pass the array
}