Develop Reference

I am trying to Export links in Html table to excel sheet But its not working

I am trying to export tag in table to excel sheet but I'm not able to find out proper function or method which helps to do it. These links should be like hyperlink in the excel sheet.
I'm using a library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js">
<script>
function export_data(){
let data=document.getElementById('data');
const workbook = XLSX.utils.book_new();
var ws2 = XLSX.utils.table_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, ws2, "Dat");
XLSX.writeFile(workbook, 'test.xlsx');
}
</script>
<input type="button" onclick="export_data()" value="Export">
<table id="data" border="1">
<tr>
<td>S.No</td>
<td>Name</td>
</tr>
<tr>
<td >3434</td>
<td> Google</td>
</tr>
</table>
Let me know if you have already done this type of work. Thankyou

I have a slight problem with post table in php

I have a simple university project for an online course site like Udemy.
This form for adding a course contains the course data and a dynamic table with a button that adds a new row.
My problem is POST data, I don't know how to get the table data to store in the Database.
edit:
I know how to use action"test.php".
I have created sign-up and login pages.
i know I can get post data example $email = $_POST['email'];
my problem is how I get a table
php code(I know all of it html):
<form action="" method="POST">
<div>
<label for="titleC">title course</label>
<input type="text" name="titleC" id="titleC" required>
</div>
<div>
<label for="Age">Choose a Rating Age:</label>
<select name="Age" id="Age" required>
<option value="12">12+</option>
<option value="16">16+</option>
<option value="18">18+</option>
</select>
</div>
<div>
<label for="Cprice">Course Price</label>
<input type="number" name="Cprice" id="Cprice" min="0" required>
</div>
<div>
<label for="Categories">Choose a Categories:</label>
<select name="Categories" id="Categories">
<option value="Development">Development</option>
<option value="IT">IT</option>
<option value="Design">Design</option>
<option value="Photography & Video">Photography & Video</option>
</select>
</div>
<div>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
</div>
<table id="listVideo">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" name="name[]" /></td>
<td><input type="text" id="txtLink" name="link[]" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="soloButton">
<button type="submit" name="addcourse-submit" value="submit">submit</button>
</div>
</form>
js code:
function Add() {
var txtName = document.getElementById("txtName");
var txtCountry = document.getElementById("txtLink");
AddRow(txtName.value, txtCountry.value);
txtName.value = "";
txtCountry.value = "";
};
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = button.parentNode.parentNode;
var name = row.getElementsByTagName("TD")[0].innerHTML;
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = document.getElementById("listVideo");
//Delete the Table row using it's Index.
table.deleteRow(row.rowIndex);
}
};
function AddRow(name, txtLink) {
//Get the reference of the Table's TBODY element.
var tBody = document.getElementById("listVideo").getElementsByTagName("TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = row.insertCell(-1);
cell.innerHTML = name;
//Add txtLink cell.
cell = row.insertCell(-1);
cell.innerHTML = txtLink;
//Add Button cell.
cell = row.insertCell(-1);
var btnRemove = document.createElement("INPUT");
btnRemove.type = "button";
btnRemove.value = "Remove";
btnRemove.setAttribute("onclick", "Remove(this);");
cell.appendChild(btnRemove);
}
The dynamic table was taken from one of the tutorials.
Thank you
[English is not my native language sorry]

multiple pages should read data from central webpage

I am trying to develop a information based website to showcase list of automation projects are completed by my team. Idea is to create 3 webpages
Page1, will have information about the automation projects delivered to the clients (For clients to see)
Page2, will have the metrics like time took before automation and time after automation etc. This will be presented in the bar and circular graphs (For management to see)
Page3, This should act like central page and data entered here should reflect in other pages. This will be in table format
Problem here is I am struggling to write code such that page1 and page 2 will automatically read corresponding data from page3. Any help with code, links or suggestions is highly appreciated
enter code here
here is our code:
html 1: dynamically added rows with edit and save delete buttons to a table
<body>
<div class="marginT5 float_left"><img src="black.png" align="right"
width="260" height="100"
/></div>
<div class="main_navline">
<div > </div>
<div id ="test" title="" class="manu" align="center" > </div>
<div > </div>
<form onsubmit="passing()" id="myForm" method="get" >
<table class="data_table" id="data_table" >
<tr>
<th>Level of the task</th>
<th>Task</th>
<th>Automation ID</th>
<th>Activity</th>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_type"></td>
<td><input type="text" id="new_url"></td>
<td><input type="text" id="new_description"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row">
</td>
</tr>
</table>
</form>
html 2: the url and description of each row entered in htm1 need to be displayed in html2
<body >
<div class="marginT5 float_left"><img src="black.png" align="right" width="260" height="100"
/></div>
<div class="main_navline"> </div>
<div > </div>
<div class="inner_wrapper">
<div class="manu" align="center" >TEAM</div>
<div class="w3-container">
<form name="form1" method="get">
<table>
<tr>
<td id="here"></td>
</tr>
</table>
</form>
ourjavascript:
function edit_row(no)
{
document.getElementById("save_button"+no).disabled = false;
document.getElementById("edit_button"+no).disabled = true;
/* document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block"; */
var name=document.getElementById("name_row"+no);
var url=document.getElementById("url_row"+no);
var type=document.getElementById("type_row"+no);
var description=document.getElementById("description_row"+no);
var name_data=name.innerHTML;
var url_data=url.innerHTML;
var type_data=type.innerHTML;
var description_data=description.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
url.innerHTML="<input type='text' id='url_text"+no+"' value='"+url_data+"'>";
type.innerHTML="<input type='text' id='type_text"+no+"' value='"+type_data+"'>";
description.innerHTML="<input type='text' id='description_text"+no+"' value='"+description_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var url_val=document.getElementById("url_text"+no).value;
var type_val=document.getElementById("type_text"+no).value;
var description_val=document.getElementById("description_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("url_row"+no).innerHTML=url_val;
document.getElementById("type_row"+no).innerHTML=type_val;
document.getElementById("description_row"+no).innerHTML=description_val;
document.getElementById("save_button"+no).disabled = true;
document.getElementById("edit_button"+no).disabled = false;
/* document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none"; */
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_name").value;
var new_url=document.getElementById("new_url").value;
var new_type=document.getElementById("new_type").value;
var new_description=document.getElementById("new_description").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='url_row"+table_len+"'>"+new_url+"</td><td id='type_row"+table_len+"'>"+new_type+"</td><td id='description_row"+table_len+"'>"+new_description+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' disabled onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_url").value="";
document.getElementById("new_type").value="";
document.getElementById("new_description").value="";
}

Insert HTML table row clone at index without jquery

I am attempting to insert a row at the index of the addmorebutton td row.
First attempt indeed adds a row at the desired index however not as I would have expected, simply as space vs actually adding a bounded row column box.
How do I insert a new row at the clicked index of td that is empty and is indeed apart of the table?
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('Table').deleteRow(i);
}
function addRow() {
var i = row.parentNode.parentNode.rowIndex;
document.getElementByID('Table').insertRow(i);
}
turkSetAssignmentID();
<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>
<form name='mturk_form' method='post' id='mturk_form' action='https://www.mturk.com/mturk/externalSubmit'>
<input type='hidden' value='' name='assignmentId' id='assignmentId' />
<h1>This is a test</h1>
<div id="tablediv">
<input type="button" id="addbutton" value="Add Index" /><br/><br/>
<table id="Table" border="1">
<tr>
<td>Index</td>
<td>Measured Depth</td>
<td>Inclination</td>
<td>Azimuth</td>
<td>Delete?</td>
<td>Add Row?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="Measured Depth" contenteditable='true'></td>
<td><input size=25 type="text" id="Inclination" contenteditable='true'></td>
<td><input size=25 type="text" id="Azimuth" contenteditable='true'></td>
<td><input type="button" id="delbutton" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorebutton" value="Add More Indexs" onclick="addRow.apply(this)" /></td>
</tr>
</table>
</div>
<p><input type='submit' id='submitButton' value='Submit' /></p>
</form>

You could try to add the respective cells to new row, saving the row on a var and the with the appendChild() function. Something like this:
function addRow(row) {
var i = row.parentNode.parentNode.rowIndex + 1;
var nextRow = document.getElementById('Table').insertRow(i);
// Start iterating over all the cells on the row
var cell = nextRow.insertCell(0);
cell.appendChild(document.createTextNode(i));
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
input = document.createElement("Input");
input.type = "button";
input.setAttribute("onclick", "addRow(this)");
input.value = "Add More Indexs"
cell.appendChild(input);
}
And of course append on each cell the respective input.
Then maybe you would like to add a function to increase the index number of the rows under the new one...
Also I changed the onclick value on the original button to addRow(this).

Change value of select option using Js without page refresh

So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!

u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.

This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});