Modificare script add delete row in html table
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
sterica
- Mesaje: 280
Modificare script add delete row in html table
Salutare,
Am urmatorul cod (nu imi apartine), l-am gasit pe google, as vrea sa ii aduc doua modificari.
- adaugarea unui rand nou se face intotdeauna in ultima pozitie, cum pot face ca sa pot adauga randuri noi intre randurile deja create.
- numeroarea nu se pastreaza cand se sterg randuri, cum pot modifica ca se numeroteze automat si dupa stergea aleatorie a randurilor
Cod: Selectaţi tot
<table id="POITable" border="1">
<tr>
<td>POI</td>
<td>Latitude</td>
<td>Longitude</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
</tr>
</table>
<script>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
console.log( 'hi');
var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
</script>
Demo:
Multumesc!
misat
Pentru a adauga un rind nou nu la coada ai putea sa utilizezi una dintre metodele insertBefore, insertAfter unui element DOM.
Pentru a respecta numaratoarea rindurilor tabelului tre ca la fiecare modificare a tabelului (adaugare/stergere) sa "renumerotezi" rindurile care urmeaza dupa cel modificat (nu vad o solutie mai buna), deci parcurgi pe fiecare si incrementezi sau decrementezi in functie de operatia care ai efectuat-o, sau pur si simplu rescrii indicele cu cel corect (asa as face eu).
Daca ai nevoie de un exemplu poti sa analizezi acest exemplul (care este cel indicat de tine si putin adaptat):
http://codepen.io/maikttt/pen/LWVqZY
Acest exemplu are o mica problema: de fiecare data cind se creeaza un rind nou se face "clone" la primul rind, deci in cazul cind vei sterge toate rindurile apoi incerci sa adauci din nou, nu o vei mai putea face. Deaceea iti sugerez sa interzici stergerea daca ai un singur rind (rind cu date desigur, nu header, sau altceva), sau sa gasesti o alta metoda care ar rezolva aceasta situatie.
MarPlo
Salut
Vezi si acest script; preluat de la adresa:
https://coursesweb.net/javascript/add-de ... javascript
Cod: Selectaţi tot
<table id="table1" border="1">
<tr><th>ID</th><th>Col-1</th><th>Col-2</th><th>Delete</th><th>Add Rows</th></tr>
<tr>
<td class="tbl_id">1</td><td><input type="text" name="tm1[]"/></td><td><input type="text" name="nm2[]"/></td>
<td><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
</table>
<div><input type="button" value="Add Row at end" onclick="ob_adRows.addRow()"/></div>
<script>
//JS class to add/delete rows in html table - https://coursesweb.net/javascript/
//receives table id
function adRowsTable(id){
var table = document.getElementById(id);
var me = this;
if(document.getElementById(id)){
var row1 = table.rows[1].outerHTML;
//adds index-id in cols with class .tbl_id
function setIds(){
var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
}
//add row after clicked row; receives clicked button in row
me.addRow = function(btn){
btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
setIds();
}
//delete clicked row; receives clicked button in row
me.delRow = function(btn){
btn.parentNode.parentNode.outerHTML ='';
setIds();
}
}
}
//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>
Demo:
sterica
multumesc mult de ajutor, este ceea ce am nevoie
Subiecte similare
-
Modificare atribute HTML la clic
JavaScript - jQuery - Ajax
Primul mesaj
Salut,
Lucrez la un script de listare a fisierelor de pe server, dar in momentul actual nu este prea eficient deoarece pentru fiecare...
Ultimul mesaj
Salut
Nu stiu ce cod vrei sa nu se repete si unde sa apara o singura data; dar ca sa modifici la clic atributele unui elemen html, se foloseste...
-
delete sql limitat
PHP - MySQL - XML
Primul mesaj
Salutare,
Am urmatorul cod sql care imi sterge valorile dintr-o tabela:
$sql = DELETE FROM nume_activ WHERE ID_NUME = $id_nume ;
In tabela in...
Ultimul mesaj
Functioneaza cu LIMIT.
Multumesc mult!
-
script si cod html calculator calorii
Cereri si Oferte
Buna ziua
Va rog sa ma ajutati cu un script calculator calorii, vreau sal pun pe saitul meu. va rog daca e posibil in limba romana
-
Modificare cod Animated musical notes
HTML - XHTML - CSS
Primul mesaj
Fiindca astazi suntem in 31 decembrie 2020, va doresc un sincer La multi ani si toate cele bune in 2021. :)
Sincer sa fiu, am imprumutat un cod de...
Ultimul mesaj
Multumesc pentru raspuns si pentru solutia de cod.
-
Modificare cod in caz de PHP short tags nefunctional
PHP - MySQL - XML
Primul mesaj
Salutare,
revin dupa o perioada relativ mare cu o nedumerire.
Timp de circa 10 ani, site-ul a functionat cu acest tip de aranjament :
<?php...
Ultimul mesaj
Salut
Conform noilor versiuni php, sintaxa cu php short-tags nu mai e sustinuta; deci modificarile respective trebuie facute.
- Daca ai un numar de...
-
Modificare meniu dropdown subcategorii si postari
PHP - MySQL - XML
Am in baza de date categoriile si subcategoriile la o sectiune din site:
Exemplu:
Categoria 1 - subcategoria 1, 2,3 ... etc
Categoria 2
Categoria...