Question

我试图在JavaScript的帮助下动态地向表中添加一行。当我在控制台中注销每个步骤时，它会显示预期结果，但是新行不会出现在视图中。

notification.blade.php

@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

的script.js

  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;
}

请帮助我了解我哪里出错。

Answer 1

更改了js文件

function deleteRow(el) {
var table = document.getElementById('addLMOtable');
var i = el.parentNode.parentNode.rowIndex;
table.deleteRow(i);
while (table.rows[i]) {
    updateRow(table.rows[i], i, false);
    i++;
}
}

function insRow(event)
{
var table = document.getElementById('addLMOtable'),
    tbody = table.getElementsByTagName('tbody')[0],
    clone = tbody.rows[0].cloneNode(true);
var new_row = updateRow(clone, ++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 = 'name' + i;
inp2.id = 'level' + i;
inp3.id = 'quantity' + i;
inp4.id = 'volume' + i;

if (reset) {
    inp1.value = inp2.value = inp3.value = inp4.value = '';
}
console.log(inp1);
console.log(inp2);
console.log(inp3);
console.log(inp4);

return row;
}

使用Laravel在视图中不显示动态添加到表的行

1 个答案: