How can I create a table that appends a column every time a user clicks on it
Question
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
2 answers
solution1
0 2017-10-31 03:05:44
Here you go with a solution
$(document).ready(function() { $("#table").click(function(){ $(this).find('tr').append("<th class='column'></th>"); }); });
.column { border: 1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id = "table" style="width: 100%; height: 100px; border-style: solid"> <tr> <th class = "column"></th> </tr> </table>
Hope this will help you.
solution2
0 2017-10-31 03:46:40
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I get the row and column number when the user clicks in a particular column table in jquery
How can I 1 to a variable for every time someone clicks a button?
How can I create a particle when the user clicks on the exact spot?
How do I show N divs every time user clicks same button?
How can I make a function that clicks in every child element of a div at the same time?
How can I create new objects with user defined properties every time a function is called in JavaScript?
How do I create a Javascript that finds average at every clicks on a button
How can I prevent an element to load until such time when the user clicks a button in javascript/jquery?
How can I make setInterval increase each time when user clicks?
How can I load user every time the page is refreshed?
Related Tags