-
Notifications
You must be signed in to change notification settings - Fork 46
/
table-to-json-converter.html
171 lines (162 loc) · 8.41 KB
/
table-to-json-converter.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
---
title: HTML Table to JSON Data Converter | Developer Tools
layout: post
---
<html>
<head>
<!-- Meta tags common for website -->
{% include common-meta %}
<title>{{ page.title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="This is easy to use open source tool to convert HTML table into JSON data online. " />
<meta name="keywords" content="online,tool,json,html,table,convert,converter,web,opensource" />
<!-- CSS for the site theme -->
{% include theme-css %}
<!-- Annoying IE fixes -->
{% include ie-fixes %}
</head>
<body class="hold-transition skin-green sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<!-- header tag from theme -->
{% include theme-header %}
<!-- Sidebar for the whole website -->
{% include theme-sidebar %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row">
<!-- left column -->
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h1 class="box-title">Convert HTML Table Data To JSON Format</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="csv">CSV Data</label>
<textarea class="form-control" rows="10" id="htmlTable" placeholder="Enter your HTML Table Code here" autofocus></textarea>
<div style="display:hidden;">
<div id="hidden" style="display:hidden;"></div>
</div>
</div>
</form>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-info" id="convert2json">Convert to JSON</button>
</div>
</div>
</div>
<!-- /.box-footer -->
</div>
</div>
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Copy Your JSON Formatted Data From Here</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label for="json">JSON Converted Data</label>
<textarea class="form-control" id="json" rows="10"></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">About HTML Table to JSON Converter Tool</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>This is a free online tool to convert a HTML table formatted data to JSON. This can be useful for webscraping needs. You can convert any HTML table on web pages to JSON and use as input for other software.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What is a JSON?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>JSON (JavaScript Object Notation) is a popular format used to transfer data between applications. It is very common object format in web applications. JavaScript applications do not require any speciall handling for this type of data since its is already an object of javascript format. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What is a HTML table?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>HTML tables are the most popular format of data display on the Internet. Any information that needs tabular display can be easily displayed using HTML <table> tag. </p>
<p>The HTML tables are also a rich form of display on web page. This is possible with the help of JavaScript programming. Now users can interact with table e.g. sort it, or highlight the line to match content etc.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why Convert From HTML table to JSON?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>There is a lot of information on web that can used to develop other tools and information. JSON is a easy to consume data for dynamic web applications. If you find a web page with HTML table fromatted data then you can easily convert it using this tool and use it in your application. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why Do We Need A Html Table to JSON Converter Online?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>The online converter is a good help for content researchers and manual web scrappers. This tool can be handy since you just need to use a web browser. </p>
<p>Any HTML table can be browsed on a web browser and a view source (on IE) or inspect element (on Chrome, Firefox and other browsers) can show you the HTML code of table.</p>
<p>You just need to copy and paste the HTML table code into this tool and get the JSON data.</p>
</div>
<!-- /.box-body -->
</div>
</section>
{% include addthis %}
</div>
<!-- /.content-wrapper -->
{% include theme-footer %}
</div>
<!-- ./wrapper -->
{% include theme-bottom-js %}
</body>
<script src="plugins/selectOnFocus/jquery.selectOnFocus.min.js"></script>
<script src="javascripts/papaparse.min.js"></script>
<script src="plugins/tabletojson/jquery.tabletojson.min.js"></script>
<script>
$(document).ready(function() {
$("#convert2json").click(function() {
$("#json").empty();
$('#hidden').empty();
$('#hidden').append($('#htmlTable').val());
var tbl = $('#hidden table');
var json = $(tbl).tableToJSON();
tbl.hide();
if (json) {
var jsonString = JSON.stringify(json);
$('#json').val(jsonString);
}
});
$("#json").selectOnFocus();
$("#htmlTable").selectOnFocus();
$('#converters-category').addClass('active');
});
</script>
</html>