0
JavaScriptを使用してテーブルに動的に行を追加しようとしています。 コンソールの各ステップをログアウトすると、予想される結果が表示されますが、新しい行はビューに表示されません。テーブルに動的に追加された行がLaravelを使用するビューに表示されない
@extends('layouts.app')
@section('title', '| Homepage')
@section('content')
<div id="wrapper" class="active">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand">menu</li>
</ul>
@include('includes.sidebar')
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-xs-12">
<div class="well">
<form class="form-horizontal" role="form" method="POST" action="{{ route('submit.notification') }}">
{{ csrf_field() }}
<fieldset>
<legend>
SECTION 1 - Personal Details
</legend>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-12">
{!! Form::label('unit', 'Unit Code (if teaching):', ['class' => 'control-label']) !!} <br>
{!! Form::text('unit', $value = null, ['class' => 'form-control']) !!}
</div>
<div class="col-xs-12">
{!! Form::label('unit', 'Unit Title (if teaching):', ['class' => 'control-label']) !!} <br>
{!! Form::text('unit', $value = null, ['class' => 'form-control']) !!}
</div>
<div class="col-xs-12">
{!! Form::label('project_Title', 'Project Title (if FYP/research):', ['class' => 'control-label']) !!} <br>
{!! Form::text('project_Title', $value = null, ['class' => 'form-control']) !!}
</div>
<div class="col-xs-12">
{!! Form::label('project_Title', 'Ref. No (if FYP/research):', ['class' => 'control-label']) !!} <br>
{!! Form::text('project_Title', $value = null, ['class' => 'form-control']) !!}
</div>
<div class="col-xs-12">
{!! Form::label('Storage_Location', 'Storage Location:', ['class' => 'control-label']) !!} <br>
{!! Form::text('Storage_Location', $value = null, ['class' => 'form-control' ]) !!}
</div>
<div class="col-xs-12">
{!! Form::label('name_keeper', 'Name of the Keeper:', ['class' => 'control-label']) !!} <br>
{!! Form::text('name_keeper', $value = null, ['class' => 'form-control' ]) !!}
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12">
<div class="row">
<legend>
SECTION 2 – Details of the Biohazardous Materials
</legend>
<div class="col-xs-8">
<h4>A. List of Living Modified Organism (LMO)</h4>
</div>
<div class="col-xs-4">
{!!Form::checkbox('A_list_LMO', 'value')!!} Not Applicable
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="LMOtablediv">
<input type="button" id="addmoreLMObutton" value="Add" onclick="insRow()" />
<table id="addLMOtable" border="1">
<thead>
<tr>
<td>No.</td>
<td>Name</td>
<td>Risk Level</td>
<td>Quantity</td>
<td>Volume</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>{!! Form::text('lmoName', null, array('id'=>'lmoName'))!!}</td>
<td>{!! Form::text('lmorisk_level', null, array('id'=>'lmorisk_level'))!!}</td>
<td>{!! Form::number('lmoquantity', null, array('id'=>'lmoquantity'))!!}</td>
<td>{!! Form::number('lmovolume', null, array('id'=>'lmovolume'))!!}</td>
<td>{{ Form::hidden('lmonotification_type', '1', null, array('id'=>'lmonotification_type')) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@stop
var table = document.getElementById('addLMOtable'),
tbody = document.querySelector("tbody"),
clone = tbody.rows[0].cloneNode(true);
function deleteRow(el) {
var i = el.parentNode.parentNode.rowIndex;
table.deleteRow(i);
while (table.rows[i]) {
updateRow(table.rows[i], i, false);
i++;
}
}
function insRow() {
var new_row = updateRow(clone.cloneNode(true), ++tbody.rows.length, true);
tbody.appendChild(new_row);
}
function updateRow(row, i, reset) {
row.cells[0].innerHTML = i;
var inp1 = row.cells[1].getElementsByTagName('input')[0];
var inp2 = row.cells[2].getElementsByTagName('input')[0];
var inp3 = row.cells[3].getElementsByTagName('input')[0];
var inp4 = row.cells[4].getElementsByTagName('input')[0];
inp1.id = 'lmoname' + i;
inp2.id = 'lmorisk_level' + i;
inp3.id = 'lmoquantity' + i;
inp4.id = 'lmovolume' + i;
if (reset) {
inp1.value = inp2.value = inp3.value = inp4.value = '';
}
return row;
}
私が間違っているつもりですどこ私は理解して助けてください。