2016-12-08 1 views
-2

dynamisch bestimmte Daten aus json Tabelle

var movies = [{ 
 
    "title": "The GodFather", 
 
    "genre": "Drama", 
 
    "year": "1978", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
    }, { 
 
    "title": "Superbad", 
 
    "genre": "Comedy", 
 
    "year": "1995", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
    }, { 
 
    "title": "The Departed", 
 
    "genre": "Drama", 
 
    "year": "2000", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
    }, { 
 
    "title": "The devil", 
 
    "genre": "comedy", 
 
    "year": "2003", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
    }, { 
 
    "title": "mummy returns", 
 
    "genre": "horrer", 
 
    "year": "2010", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
    }]; 
 

 
    function dltRow(control) { 
 

 
    document.getElementById("mytable").deleteRow(this); 
 

 
    } 
 

 
    $(document).ready(function() { 
 
    for (var i = 0; i < movies.length; i++) { 
 
     var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>'; 
 
     $('#mytable').append(x) 
 
    }; 
 
    $('.show').click(function() { 
 
     res = $(this).closest('tr').text(); 
 
     alert(res); 
 
    }) 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<body> 
 
    <h1>MOVIES LIST</h1> 
 
    <table id="mytable"> 
 
    </table> 
 
</body> 
 

 
</html>

Entfernen hallo i HTML-Tabelle von JSON-Daten mit Jquery erstellt haben ... in meinem Tisch gibt es 2 Tasten anzeigen und löschen ..., wenn ich zeigen klicken es sollte aktuelle Zeile Details in Alarm-Box zeigen .. es wird angezeigt .. aber es ist mit anzeigen und löschen Schaltfläche .. Ich möchte diese Show löschen und löschen .. wie es geht .. bitte jemand mir helfen? ?.

+1

Das ist nicht [JSON] (http://www.json.org/): [? Was ist der Unterschied zwischen JSON und Objektliteral Notation] (https://stackoverflow.com/ Fragen/2904131/Was ist der Unterschied zwischen Json-und-Objekt-Literal-Notation? – Andreas

Antwort

1

Entfernen Sie die Schaltfläche von den ausgewählten Elementen:

var movies = [{ 
 
    "title": "The GodFather", 
 
    "genre": "Drama", 
 
    "year": "1978", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
}, { 
 
    "title": "Superbad", 
 
    "genre": "Comedy", 
 
    "year": "1995", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
}, { 
 
    "title": "The Departed", 
 
    "genre": "Drama", 
 
    "year": "2000", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
}, { 
 
    "title": "The devil", 
 
    "genre": "comedy", 
 
    "year": "2003", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
}, { 
 
    "title": "mummy returns", 
 
    "genre": "horrer", 
 
    "year": "2010", 
 
    "button": "<b>SHOW</b>", 
 
    "dlt": "<b>DELETE</b>" 
 
}]; 
 

 
function dltRow(control) { 
 

 
    document.getElementById("mytable").deleteRow(this); 
 

 
} 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < movies.length; i++) { 
 
    var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>'; 
 
    $('#mytable').append(x) 
 
    }; 
 
    $('.show').click(function() { 
 
    res = $(this).closest('tr').clone().find('button').remove().end().text();//clone the element after that select the buttons using find then remove them, use end to go back to the cloned element(now without the buttons) to get the text 
 
    alert(res); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h1>MOVIES LIST</h1> 
 
    <table id="mytable"> 
 
    </table> 
 
</body> 
 

 
</html>

Verwandte Themen