javascript - Updating html table with input -

-

i learning js, html, css, , general web development first time , wanted create simple (or thought) table use keeping track of items have.

essentially want make dynamically-sized table can take , save input.

i thinking of way make javascript function in order add tags tables input given. have seen personal website developer had input boxes submit button, causes data added in table in html file's table.

for instance, if have:

<table id="inventory">   <thead>     <tr>       <th>item name</th>       <th>item number</th>       <th>item color</th>     </tr>   </thead> </table>

would possible me add

<tr class = "boxtype">   <th>boxv1</th>   <th>#1111</th>   <th>blue</th> </tr>

the above block table using javascript , inputs?

i tried making addrows method after snooping around web, , created temporary version of table empty when refreshed (meaning wasn't put code, rather added on session), want permanently stick table if possible.

edit: thoughts have:

i feel can done if make <tbody id ="list"> , use form of innerhtml add <tr> block in?

maybe using php form in order update html table block?

thank you!

use innerhtml or jquery html() function , localstorage keep track of update dom content. remember reload old data on page load. see full example:

http://jsbin.com/voroku/edit?html,output

html input:

<input type="text" id="one"> <input type="text" id="two"> <input type="text" id="three"> <button onclick="addrow()">add</button>

js function:

$( document ).ready(function(){   $('#screen').html(localstorage.getitem("data"));  });  function addrow(){       var str = '<tr class = "boxtype">\                  <td>'+$('#one').val()+'</td>\                  <td>'+$('#two').val()+'</td>\                  <td>'+$('#three').val()+'</td>\                  </tr>';       $('#screen').append(str);        localstorage.setitem("data", $('#screen').html());     }

Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more