I am pretty new to JavaScript and would like to use a function to insert a table into a form. So far I have the following code (working - except for the header) but am struggling with the following:
1) How can I use a prompt (popup) to ask for the needed table instead of using input fields like I have ? 2) How can I include the width (in %) here ? 3) How can I always add a table header ?
I hope someone here can help me to understand this.
My Code:
<html>
<head>
<script type="text/javascript">
function insertTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var theader = "<table id='table1'><thead></thead>";
var tbody = "";
for(var i = 0; i < num_rows; i++)
{
tbody += "<tr>";
for(var j = 0; j < num_cols; j++)
{
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
border:solid 1px;
border-collapse:collapse;
width:100%;
}
#table1 td
{
border:solid 1px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br />
<label>Width (%): <input type="text" name="width" id="width"/></label><br />
<button type="button" onclick="insertTable()">Create Table</button>
<div id="wrapper"></div>
</form>
</body>
</html>
Thanks for any help with this, Tim
I am pretty new to JavaScript and would like to use a function to insert a table into a form. So far I have the following code (working - except for the header) but am struggling with the following:
1) How can I use a prompt (popup) to ask for the needed table instead of using input fields like I have ? 2) How can I include the width (in %) here ? 3) How can I always add a table header ?
I hope someone here can help me to understand this.
My Code:
<html>
<head>
<script type="text/javascript">
function insertTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var theader = "<table id='table1'><thead></thead>";
var tbody = "";
for(var i = 0; i < num_rows; i++)
{
tbody += "<tr>";
for(var j = 0; j < num_cols; j++)
{
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
border:solid 1px;
border-collapse:collapse;
width:100%;
}
#table1 td
{
border:solid 1px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br />
<label>Width (%): <input type="text" name="width" id="width"/></label><br />
<button type="button" onclick="insertTable()">Create Table</button>
<div id="wrapper"></div>
</form>
</body>
</html>
Thanks for any help with this, Tim
Share Improve this question asked Oct 27, 2013 at 10:42 user2571510user2571510 11.4k39 gold badges94 silver badges142 bronze badges3 Answers
Reset to default 2I have added few changes in the JS and CSS in your code. This would give you the header for each column and also will set the width of table in %
To display the form in the pop-up, you can use any jquery plugin. The best jq plugin for pop-up is jquery-lightbox-me
<html>
<head>
<script type="text/javascript">
function insertTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var width = document.getElementById('width').value;
var theader = "<table id='table1' width = ' "+ width +"% '>";
var tbody = "";
for(var j = 0; j < num_cols; j++)
{
theader += "<th>header col "+ (j+1) +" </th>";
}
for(var i = 0; i < num_rows; i++)
{
tbody += "<tr>";
for(var j = 0; j < num_cols; j++)
{
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
border:solid 1px;
border-collapse:collapse;
}
#table1 th
{
border:solid 1px;
border-collapse:collapse;
}
#table1 td
{
border:solid 1px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br />
<label>Width (%): <input type="text" name="width" id="width"/></label><br />
<button type="button" onclick="insertTable()">Create Table</button>
<div id="wrapper"></div>
</form>
</body>
</html>
Hope this would help you.
Thanks
Let say I have a CSV, It should work
Header1,Header2,Header3
1,2,3
4,5,6
var data = evt.target.result;
var delimiter = ',';
var escape = '\n';
var rows = data.split(escape);
var tbl = document.createElement('table');
tbl.style.width = '100%';
//tbl.setAttribute('border', '1', "green");
tbl.className = "table table-hover table-condensed dataTable";
var tbdy = document.createElement('tbody');
for (index in rows) {
var tr = document.createElement('tr'); // creating new row
var items = rows[index].split(delimiter);
for (itemindex in items) {
var td = "";
if (index == 0) {
td = document.createElement('th');
} else {
td = document.createElement('td');
}
td.appendChild(document.createTextNode(items[itemindex])); // creating new cell
tr.appendChild(td); // add to current tr
}
tbdy.appendChild(tr); // add new row (tr) to table
}
tbl.appendChild(tbdy);
document.getElementById('byte_content').appendChild(tbl);
Have a look at JQuery and the show() / hide() functions. You can use 'real' javascript-popups, but some browsers/browser-configurations won't open the new tab/window. Summing up, think about your use case, create all necessary div-containers and show exactly one div container on your page. You can find more about JQuery here http://www.w3schools./jquery/jquery_hide_show.asp and of course here http://api.jquery./show/. You are able to change the table-attributes and corresponding css with JQuery-functions as well.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744167132a4561354.html
评论列表（0条）