Json to Table

├── favicon.ico ├── google3de67356095dee46.html ├── .gitattributes ├── docs ├── data │ ├── download.html │ ├── demo.html │ ├── home.html │ ├── about.html │ └── examples.html ├── index.html ├── css │ └── styles.css ├── pages │ └── index.html └── js │ └── jsoneditor.js ├── index.html ├── README.md ├── LICENSE ├── testcases.html ├── demo.html └── jsoneditor.js /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/usmanulhaq/json-editor/HEAD/favicon.ico -------------------------------------------------------------------------------- /google3de67356095dee46.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google3de67356095dee46.html -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /docs/data/download.html: -------------------------------------------------------------------------------- 1 |

2 |

You can download the latest version from below

3 | 4 | download zip 5 |

-------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Json to Table 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Json to Table 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 5rem; 3 | } 4 | 5 | .content 6 | { 7 | padding: 1rem 1rem; 8 | text-align: left; 9 | } 10 | 11 | .blog-footer { 12 | padding: 1rem 0; 13 | color: #999; 14 | text-align: center; 15 | background-color: #f9f9f9; 16 | border-top: .05rem solid #e5e5e5; 17 | border-bottom: .05rem solid #e5e5e5; 18 | } 19 | .blog-footer p:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | [contenteditable] { min-height: 1em} 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A JSON editor to edit the JSON string comprising of array of JavaScript objects 2 |
3 | You can convert the input JSON string to an editable tabular format 4 |
5 | You can edit the table values and the table itself by inserting new rows, columns or nested tables in the cells 6 |
7 | Finally convert that updated table back to the JSON string 8 |
9 |
10 | You can check the project webpage for live version and project details. 11 |
12 | https://usmanulhaq.github.io/json-editor/ 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 usmanulhaq 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /testcases.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 29 | 30 | 31 | 32 | 33 | 34 |

35 | 36 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /docs/data/demo.html: -------------------------------------------------------------------------------- 1 |

2 |

Summary

3 |

You can convert a json array to table and then that table back to json array

4 |

The created table is editable, you can edit the table cells as well as perform several other functions that are available on right click

5 | 6 |

7 |

8 | Enter a json array of objects 9 | 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 | 54 | 55 |

56 | -------------------------------------------------------------------------------- /docs/data/home.html: -------------------------------------------------------------------------------- 1 |

2 |

JSON Editor is a collection of jquery functions to convert a json array to an editable html table and then back to jason array

3 |

4 | json array should be in a below format

5 |


 6 |     [{'key1':'value1_A', 'key2':'value2_A'},{'key1':'value1_B', 'key2':'value2_B' },{'key1':'value1_C', 'key2':'value2_C' }]
 7 |

8 |

9 | This is an array of javascript object and each object is a list of key & value pairs

10 |

Some features of the code

11 |

In a key value pair; the value can be a single string/number or can be an object or array of objects as well. In this case the created table will have a child table in place of value.
In the editor you can insert new values, columns, rows, tables and delete the existing ones
The output JSON is simplified in such a way that if a key doest not contain a value, it is removed from the resultant JSON
The editor interface is created to be very user friendly, one can just right click and performs the operations

17 |

How to use

18 |

19 | After including the javascript file in you code just call the below function

20 |

21 | 22 | jsonEditorInit(table_container_id, json_input_container_id, json_output_container_id, json_to_table_btn_id, table_to_json_btn_id); 23 | 24 |

26 | table_container_id: id of the container where the editor will be created 27 |
29 | json_input_container_id: id of the input element from where the json array is to be taken 30 |
32 | json_output_container_id: id of the output container where the output json is to be shown 33 |
35 | json_to_table_btn_id: id of the button which will be used to initiate the json to table call. 36 |
38 | table_to_json_btn_id: id of the button which will be used to initiate the table to json call. 39 |

41 |

42 | 43 | 44 |

-------------------------------------------------------------------------------- /docs/data/about.html: -------------------------------------------------------------------------------- 1 |

2 |

Release notes

3 | 4 |

Dated: 14-Feb-20

5 |

Notes:

6 |

Added a feature request # 6 by KevynTD
Updated some site pages

10 |
11 | 12 |

Dated: 25-Nov-19

13 |

Notes:

14 |

Added a feature request # 7 by KevynTD
Added some more pages to test the functionality of the code

18 |
19 | 20 |

Dated: 15-Sep-19

21 |

Notes:

22 |

Fixed some issue in the code and added some data entry checks by #5 by mounir01
Added some pages to easily test the functionality of the code

26 |
27 | 28 |

V 4.0

29 |

Dated: 15-Oct-18

30 |

Notes:

31 |

Editor now supports adding and deleting new columns and rows
Inserting/deleting nested tables, and each nested table is editable same as the parent one
headings were not editable before, but now they are also editable
A minification algorithm is added to simplify the resultant json string
versions of jquery and bootstrap are updated to latest
Some bug fixes related to nested tables
Updated the documentation
Tested on Firefox and Chrome, Internet Explorer is not fully supported

41 |
42 |

V 3.0

43 |

Dated: 26-May-18

44 |

Notes: The table is now editable; i.e the user can edit the data in the table and then can convert it back to json array"

45 |

Updated the documentation

46 |
47 |

V 2.0

48 |

Dated: 23-May-18

49 |

Notes: Added conversion function "from table to json array"

50 |
51 |

V 1.0

52 |

Dated: 18-May-18

53 |

Notes: First Version

54 |

About The template

55 |

These pages are based on a template based on bootstrap by Usman ul Haq

56 |

About author

57 |

Usman ul Haq

58 |

Contact: uuhaqpk@yahoo.com

59 |

60 | -------------------------------------------------------------------------------- /docs/data/examples.html: -------------------------------------------------------------------------------- 1 |

2 |

3 |

Json

4 |

 5 |             
 6 |                     [
 7 |                     {"id":1, "name":"name1"},
 8 |                     {"id":2, "name":"name2", "salary":2000},
 9 |                     {"id":3, "name":"name3"},
10 |                     {"id":4, "name":"name4", "bonus":3000},
11 |                     {"id":5, "name":"name5", "salary":{"basic":2000, "extra":"500"}},
12 |                     {"id":6, "name":"name6", "bonus":[{"quarter":1, "first":1000, "second":"500"},{"quarter":2, "first":1000, "second":"500"}]}
13 |                     ]
14 |             
15 |

16 | 17 |

Table

18 |

name

salary

bonus

name1

name2

2000

name3

name4

3000

name5

basic	extra
2000	500

name6

quarter	first	second
1	1000	500
2	1000	500

19 |

20 | 21 |

22 |

Json

23 |

24 |             
25 |     [
26 |     {"id":1, "name":"name1"},
27 |     {"id":2, "name":"name2"},
28 |     {"id":3, "name":"name3"}
29 |     ]
30 |             
31 |

32 | 33 |

Table

34 |

id	name
1	name1
2	name2
3	name3

35 |

36 | 37 | 38 | 39 |

-------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 9 | 10 | 11 | 12 | 13 |

14 | 15 |

16 |

17 | Enter a json array of objects 18 | 28 |

29 |

30 | 31 |

32 |

33 |

34 | 36 |

37 |

38 | 39 |

40 |

41 |

42 | 43 |

44 |

45 |

46 | 48 |

49 |

50 | 51 |

52 |

53 |

54 | 55 |

56 | 57 | 59 | 62 | 63 | 65 | 66 | 67 | 69 | 70 | 71 | 72 | 73 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /docs/pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | 19 | 22 | 23 |

24 |

26 | Home (current) 27 |
29 | Examples (current) 30 |
32 | Demo (current) 33 |
35 | Download (current) 36 |
38 | About (current) 39 |

42 | 43 |

44 |

45 | 46 |

47 |

48 |

49 |

50 |

51 | 52 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /jsoneditor.js: -------------------------------------------------------------------------------- 1 | var counter_id; 2 | 3 | var parent_clicked_row; 4 | var parent_clicked_col; 5 | var parent_counter_id; 6 | 7 | var gbl_table_container_id; 8 | var gbl_json_input_container_id; 9 | var gbl_json_output_container_id; 10 | var gbl_json_to_table_btn_id; 11 | var gbl_table_to_json_btn_id; 12 | 13 | var copied_row; 14 | var copied_column; 15 | 16 | var max_counter = 0 17 | 18 | var obj_clicked_row = {}; 19 | var obj_clicked_col = {}; 20 | 21 | function jsonEditorInit(table_container_id, json_input_container_id, json_output_container_id, json_to_table_btn_id, table_to_json_btn_id) { 22 | 23 | gbl_table_container_id = table_container_id; 24 | gbl_json_input_container_id = json_input_container_id; 25 | gbl_json_output_container_id = json_output_container_id; 26 | gbl_json_to_table_btn_id = json_to_table_btn_id; 27 | gbl_table_to_json_btn_id =table_to_json_btn_id; 28 | 29 | $('#' + table_to_json_btn_id).on('click', function(){ 30 | if ( $('#' + json_output_container_id ).is( "input" ) ) { 31 | $('#' + json_output_container_id ).val(JSON.stringify(makeJson())); 32 | } 33 | else{ 34 | $('#' + json_output_container_id ).html(JSON.stringify(makeJson())); 35 | } 36 | }); 37 | 38 | $('#' + json_to_table_btn_id).on('click', function(){ 39 | 40 | try { 41 | var value = $('#' + json_input_container_id).val().trim(); 42 | json_arr = JSON.parse(value != "" ? value : "[{\" \":\" \"}]"); 43 | } catch(e) { 44 | alert(e); 45 | return; 46 | } 47 | 48 | $('#' + table_container_id ).html(makeTable(json_arr)); 49 | $('.json_table').addClass('table table-bordered table-striped table-hover table-sm'); 50 | $('.json_table thead').addClass('thead-dark'); 51 | 52 | }); 53 | } 54 | 55 | $(function() { 56 | $.contextMenu({ 57 | selector: '#json_table_1', 58 | callback: function(key, options) { 59 | 60 | clicked_col = obj_clicked_col[counter_id]; 61 | clicked_row = obj_clicked_row[counter_id]; 62 | 63 | switch(key){ 64 | 65 | case 'insertCR': 66 | 67 | var col_heading = prompt("Enter the heading of the new column"); 68 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).each(function(){ 69 | 70 | new_th = `

`+ col_heading +'

' 71 | new_td = `

`; 72 | 73 | $(this).find(`th[counter-id=${counter_id}]`).eq(clicked_col).after(new_th); 74 | $(this).find(`td[counter-id=${counter_id}]`).eq(clicked_col).after(new_td); 75 | 76 | }); 77 | break; 78 | 79 | case 'insertCL': 80 | var col_heading = prompt("Enter the heading of the new column"); 81 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).each(function(){ 82 | new_th = `

`+ col_heading +'

' 83 | new_td = `

`; 84 | 85 | $(this).find(`th[counter-id=${counter_id}]`).eq(clicked_col).before(new_th); 86 | $(this).find(`td[counter-id=${counter_id}]`).eq(clicked_col).before(new_td); 87 | }); 88 | break; 89 | 90 | case 'deleteC': 91 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).each(function(){ 92 | $(this).find(`th[counter-id=${counter_id}]`).eq(clicked_col).remove(); 93 | $(this).find(`td[counter-id=${counter_id}]`).eq(clicked_col).remove(); 94 | }); 95 | break; 96 | 97 | case 'insertRD': 98 | td_length = $(`#json_table_${counter_id} tr[counter-id=${counter_id}] th[counter-id=${counter_id}]`).length; 99 | new_tr = `` + `

`.repeat(td_length) + "" ; 100 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).eq(clicked_row+1).after(new_tr); 101 | break; 102 | 103 | case 'insertRU': 104 | td_length = $(`#json_table_${counter_id} tr[counter-id=${counter_id}] th[counter-id=${counter_id}]`).length; 105 | new_tr = `` + `

`.repeat(td_length) + "" ; 106 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).eq(clicked_row+1).before(new_tr); 107 | break; 108 | 109 | case 'deleteR': 110 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).eq(clicked_row+1).remove(); 111 | break; 112 | 113 | case 'deleteT': 114 | $(`#json_table_${counter_id}`).remove(); 115 | cell = $(`#json_table_${parent_counter_id} tr[counter-id=${parent_counter_id}]`).eq(parent_clicked_row+1).find(`td[counter-id=${parent_counter_id}]`).eq(parent_clicked_col) 116 | $(cell).html('

'); 117 | $(cell).attr('td_attr','value'); 118 | break; 119 | 120 | case 'copyRow': 121 | copied_row = $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).eq(clicked_row+1).clone(); 122 | break; 123 | 124 | case 'pasteRow': 125 | var inner_tables = $(copied_row).find('td table'); 126 | var inner_table_count = $(inner_tables).length; 127 | var i = 0; 128 | for(i=0;i 212 | 213 | 214 |

215 | 216 | 217 | 218 | 219 | 220 |

221 | 222 | 223 | 224 | `; 225 | 226 | cell = $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).eq(clicked_row+1).find(`td[counter-id=${counter_id}]`).eq(clicked_col) 227 | $(cell).html(table_template); 228 | $(cell).attr('td_attr','array'); 229 | 230 | $(`#json_table_${max_counter}`).addClass('table table-bordered table-striped table-hover table-sm'); 231 | $(`#json_table_${max_counter} thead[counter-id=${max_counter}]`).addClass('thead-dark'); 232 | 233 | } 234 | 235 | 236 | //Function takes a json object as input containing the string to be converted to the table and returns the converted string formatted as an html table. 237 | function makeTable(obj_for_table, counter = 1){ 238 | 239 | var table_html = jQuery.parseHTML( `

` ); 240 | var i= 0; 241 | var header_names = {}; 242 | var local_counter = counter; 243 | var td_attr; 244 | 245 | $.each(obj_for_table, function(level1_k, level1_v){ 246 | $.each(level1_v, function(k, v){ 247 | //console.log('Second Level: ' , key, value); 248 | if(jQuery.type(v) == 'object'){ 249 | 250 | value = makeTable( JSON.parse( "[" + JSON.stringify(v) + "]" ), counter+1 ); 251 | counter++; 252 | max_counter = counter; 253 | td_attr = 'obj'; 254 | } 255 | else if(jQuery.type(v) == 'array'){ 256 | value = makeTable( v, counter+1 ); 257 | counter++; 258 | max_counter = counter; 259 | td_attr = 'array'; 260 | } 261 | else 262 | { 263 | value = "

" + v + "

"; 264 | td_attr = 'value'; 265 | } 266 | //console.log(v,jQuery.type(v)); 267 | 268 | if(typeof(header_names[k]) == "undefined" ){ 269 | header_names[k] = i; 270 | insertColumn(table_html, k, local_counter); 271 | i++; 272 | } 273 | 274 | var cell = $(table_html).find('tr[counter-id="' + local_counter + '"]').last().find('td[counter-id="' + local_counter + '"]').eq(header_names[k]); 275 | $(cell).attr('td_attr',td_attr); 276 | $(cell).attr('counter-id',local_counter); //counter id at cell level 277 | $(cell).html(value); 278 | 279 | }); 280 | 281 | //td_list = '

'.repeat(i); 282 | td_list = `

`.repeat(i); //counter id at cell level 283 | $(table_html).append( `' ${td_list} '`); 284 | }); 285 | 286 | $(table_html).find('tr').last().remove(); 287 | 288 | $(table_html).find('td').each(function(td_i,td_v){ 289 | if($(td_v).attr('td_attr') == undefined){ 290 | $(td_v).attr('td_attr','value'); 291 | } 292 | }); 293 | 294 | return table_html; 295 | 296 | } 297 | 298 | //If the code finds any new column in JSON string, the below function will be used to insert the column in the table 299 | function insertColumn(table_ref, header_name, counter) { 300 | 301 | if( !$(table_ref).find('tr[counter-id="' + counter + '"]').first().length ){ 302 | //var thead = `

${header_name}

`; 303 | //var tbody = `

`; 304 | var thead = `

${header_name}

`; //counter id at cell level 305 | var tbody = `

` //counter id at cell level 306 | 307 | 308 | $(table_ref).append(thead); 309 | $(table_ref).append(tbody); 310 | } 311 | 312 | else 313 | { 314 | $(table_ref).find('tr[counter-id="' + counter + '"]').each(function(){ 315 | //$(this).append('

'); 316 | $(this).append(`

`); //counter id at cell level 317 | }) 318 | } 319 | var inserted_td = $(table_ref).find('tr[counter-id="' + counter + '"]').first().find('td[counter-id="' + counter + '"]').last(); 320 | 321 | $(inserted_td).html(header_name); 322 | //$(inserted_td).replaceWith('' + $(inserted_td).html() + ''); 323 | $(inserted_td).replaceWith(`

` + $(inserted_td).html() + `

`); //counter id at cell level 324 | 325 | } 326 | 327 | 328 | function makeJson(counter=1){ 329 | 330 | var header = []; 331 | var data = []; 332 | 333 | 334 | $('#json_table_header_'+ counter + ' th').each(function(i, v){ 335 | header[i] = $(this).text().trim(); 336 | }); 337 | //console.log('header: ', header, counter); 338 | var row_finder = `#json_table_body_${counter} tr[counter-id=${counter}]`; 339 | $(row_finder).each(function(row_i, row_v){ 340 | 341 | var obj = {}; 342 | //console.log('Outer loop id, value: ', row_i, row_v); 343 | 344 | $(header).each(function(header_i, header_value){ 345 | 346 | var cell = $(row_v).children('td').eq(header_i); 347 | var td_attr = $(cell).attr('td_attr'); 348 | var inner_text = $(cell).children('div').text().trim(); 349 | var inner_table = $(cell).find('table'); 350 | 351 | switch(td_attr){ 352 | case 'value': 353 | if(inner_text != "" && inner_text != null ) 354 | obj[header_value] = inner_text; 355 | //else //Uncomment it if the null values to be treated as blanks (while converting the table to json) 356 | // obj[header_value] = ''; 357 | break; 358 | 359 | case 'obj': 360 | case 'array': 361 | obj[header_value] = makeJson( $(inner_table).attr('counter-id') ); 362 | break; 363 | 364 | case null: 365 | case '': 366 | case undefined: 367 | 368 | break; 369 | 370 | default: 371 | obj[header_value] = "unknown value"; 372 | break; 373 | } 374 | //console.log('value of td_attr: ', td_attr); 375 | 376 | }); 377 | //console.log('data value: ', data); 378 | data.push(obj); 379 | }); 380 | 381 | //return JSON.stringify(data); 382 | return data; 383 | } 384 | 385 | -------------------------------------------------------------------------------- /docs/js/jsoneditor.js: -------------------------------------------------------------------------------- 1 | var counter_id; 2 | 3 | var parent_clicked_row; 4 | var parent_clicked_col; 5 | var parent_counter_id; 6 | 7 | var gbl_table_container_id; 8 | var gbl_json_input_container_id; 9 | var gbl_json_output_container_id; 10 | var gbl_json_to_table_btn_id; 11 | var gbl_table_to_json_btn_id; 12 | 13 | var copied_row; 14 | var copied_column; 15 | 16 | var max_counter = 0 17 | 18 | var obj_clicked_row = {}; 19 | var obj_clicked_col = {}; 20 | 21 | function jsonEditorInit(table_container_id, json_input_container_id, json_output_container_id, json_to_table_btn_id, table_to_json_btn_id) { 22 | 23 | gbl_table_container_id = table_container_id; 24 | gbl_json_input_container_id = json_input_container_id; 25 | gbl_json_output_container_id = json_output_container_id; 26 | gbl_json_to_table_btn_id = json_to_table_btn_id; 27 | gbl_table_to_json_btn_id =table_to_json_btn_id; 28 | 29 | $('#' + table_to_json_btn_id).on('click', function(){ 30 | if ( $('#' + json_output_container_id ).is( "input" ) ) { 31 | $('#' + json_output_container_id ).val(JSON.stringify(makeJson())); 32 | } 33 | else{ 34 | $('#' + json_output_container_id ).html(JSON.stringify(makeJson())); 35 | } 36 | }); 37 | 38 | $('#' + json_to_table_btn_id).on('click', function(){ 39 | 40 | try { 41 | var value = $('#' + json_input_container_id).val().trim(); 42 | json_arr = JSON.parse(value != "" ? value : "[{\" \":\" \"}]"); 43 | } catch(e) { 44 | alert(e); 45 | return; 46 | } 47 | 48 | $('#' + table_container_id ).html(makeTable(json_arr)); 49 | $('.json_table').addClass('table table-bordered table-striped table-hover table-sm'); 50 | $('.json_table thead').addClass('thead-dark'); 51 | 52 | }); 53 | } 54 | 55 | $(function() { 56 | $.contextMenu({ 57 | selector: '#json_table_1', 58 | callback: function(key, options) { 59 | 60 | clicked_col = obj_clicked_col[counter_id]; 61 | clicked_row = obj_clicked_row[counter_id]; 62 | 63 | switch(key){ 64 | 65 | case 'insertCR': 66 | 67 | var col_heading = prompt("Enter the heading of the new column"); 68 | $(`#json_table_${counter_id} tr[counter-id=${counter_id}]`).each(function(){ 69 | 70 | new_th = `

`+ col_heading +'

' 71 | new_td = `

`+ col_heading +'

' 83 | new_td = `

215 | 216 | 217 | 218 | 219 | 220 |

" + v + "

'.repeat(i); 282 | td_list = `

${header_name}

`; 303 | //var tbody = `

`; 304 | var thead = `

${header_name}

`; //counter id at cell level 305 | var tbody = `

'); 316 | $(this).append(`

` + $(inserted_td).html() + `