-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcrear-tabla-whith-javascript.html
executable file
·75 lines (68 loc) · 2.04 KB
/
crear-tabla-whith-javascript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- <html>
<head>
<meta charset="utf-8">
<title>Bajolinux | Ejemplo Tablas y jQuery</title>
<meta name="author" content="bajolinux.com">
<meta name="description" content="jQuery: Ejemplo de crear tablas dinámicas">
<meta name="viewport" content="width=device-width">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<table id="tabla" border="1" width="400px"></table>
</div>
<script>
$(document).ready(function(){
var tabla = $('#tabla');
var data = [
['fila 1', 'la segunda celda'],
['fila 2', 'y otra mas']
];
$.each(data, function(index, arrayValores) {
var $linea = $('<tr></tr>');
$linea.append( $('<td></td>')
.attr({ id : 'posicion' + index + '1' }) // añadimos un atributo id
.html(arrayValores[0] ) // el valor de la celda
.css({ background : 'red' }) // un estilo
.addClass("text") // una clase
);
$linea.append( $('<td></td>')
.attr({ id : 'posicion' + index + '2' })
.html(arrayValores[1] )
.addClass("text")
);
tabla.append($linea);
});
});
</script>
</body>
</html>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dynamicTable"></div>
<script>
// create table
var $table = $('<table>');
$table.attr({ border :'1px' });
// caption
$table.append('<caption>MyTable</caption>')
// thead
.append('<thead>').children('thead')
.append('<tr />').children('tr').append('<th>A</th><th>B</th><th>C</th><th>D</th>');
//tbody
var $tbody = $table.append('<tbody />').children('tbody');
// add row
$tbody.append('<tr />').children('tr:last')
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>");
// add another row
$tbody.append('<tr />').children('tr:last')
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>");
// add table to dom
$table.appendTo('#dynamicTable');
</script>