Друзья, товарищи. Помогите ! почему не работает button
Помогите ! почему не работает button. Иногда срабатывает, после множественных нажатий мышки и клавы.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 5px solid rgb(204, 175, 102);
border-collapse: separate;
empty-cells: hide;
}
th, td {
border: 2px solid #69c;
}
</style>
</head>
<body>
<p>Таблица</p>
<button><img src="icon.png" onclick="cp()"> Сохранить!</button>
<script>
var c, r, t
t = document.createElement('table');
document.body.append(t);
for (let i=0; i<3; i++)
{ r=t.insertRow();
for (let j=0; j < 5; j++) {
c=r.insertCell();
t.rows[i].cells[j].outerHTML = '<td><input type="text" value="ячейка '+i+' '+j+'"></td>'; }}
function cp()
{ for (let i=0; i<t.rows.length; i++) {
for (let j=0; j < t.rows[0].cells.length; j++) {
document.write(t.rows[i].cells[j].firstChild.value+'</br>')}}}
|
Цитата:
Цитата:
<button onclick="cp()"><img src="icon.png"> Сохранить!</button> |
Спасибо много раз.
Семен Семеныч ) |
Понял
еще вопросы чайника: 2. можно заморозить заголовок таблицы 3. ограничить границы вывода таблицы по пикселям или по % от экрана |
Цитата:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 5px solid rgb(204, 175, 102);
border-collapse: separate;
empty-cells: hide;
}
th,
td {
border: 2px solid #69c;
}
</style>
</head>
<body>
<p>Таблица</p>
<button onclick="cp()"><img src="icon.png" > Сохранить!</button>
<script>
var c, r, t
t = document.createElement('table');
document.body.append(t);
for (let i = 0; i < 3; i++) {
r = t.insertRow();
for (let j = 0; j < 5; j++) {
c = r.insertCell();
c.innerHTML = `<td><input type="text" value="ячейка ${i} ${j}"></td>`;
}
}
function cp() {
let valueAll = Array.from(t.querySelectorAll('input'), ({value})=> value).join('<br>')
document.body.insertAdjacentHTML('beforeend', valueAll)
}
</script>
</body>
</html>
|
Не очень понял,
у меня таблица на экране, как закрепить (заморозить) заголовок чтоб он не перемещался при скролинге? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.table-fixed-head {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
height: 100vh;
}
.table-fixed-head th,
.table-fixed-head td {
padding: 5px;
text-align: center;
width: 33.333vw;
}
.table-fixed-head thead {
background-color: #333;
color: #FDFDFD;
}
.table-fixed-head thead tr {
display: block;
position: relative;
}
.table-fixed-head tbody {
display: block;
overflow: auto;
width: 100%;
height: calc(100vh - 30px);
}
.table-fixed-head tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</head>
<body>
<table class="table-fixed-head">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
|
let valueAll = Array.from(t.querySelectorAll('input'), ({value})=> value).join('<br>')
document.body.insertAdjacentHTML('beforeend', valueAll)
console.log(valueAll)
Стиль программирования отличный, мне до такого еще далеко. ) Пытаюсь работать напрямую с объектами JS, ради экономии времени и памяти, учусь работать с большими БД, понимаю что JS не для этого, но изучит его надо. |
Вы настоящий друг. Понимал что делается через style, буд изучать.
А можно еще вопрос для общего развития, в JS можно банально открыть файл, прочитать, записать, закрыть, типа - open, read, write, clous. Извините я еще из функционального паскаля.) |
создание таблицы с фиксированным заголовком
georgV,
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
color: #333;
background-color: #FFFACD;
padding: 0 5vw;
}
table {
margin: 1em 0;
border-collapse: collapse;
border: 0.1em solid #d6d6d6;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
background-color: #DCDCDC;
}
th {
vertical-align: bottom;
background-color: #666;
color: #fff;
}
tr:nth-child(even) th[scope=row] {
background-color: #f2f2f2;
}
tr:nth-child(odd) th[scope=row] {
background-color: #fff;
}
tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
th {
position: sticky;
top: 0;
z-index: 2;
text-align: center;
}
th[scope=row] {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
}
body {
padding-bottom: 120vh;
}
input {
width: 90px;
}
</style>
</head>
<body>
<p>Таблица</p>
<button onclick="cp()"><img src="icon.png" > Сохранить!</button>
<script>
var c, r, t
t = document.createElement('table');
document.body.append(t);
let thead = document.createElement('thead');
let title = ['один', 2, 3, 4, 5].map(txt => {
let th = document.createElement('th');
th.textContent = txt;
return th;
});
thead.append(...title);
t.append(thead);
for (let i = 0; i < 3; i++) {
r = t.insertRow();
for (let j = 0; j < 5; j++) {
c = r.insertCell();
c.innerHTML = `<td><input type="text" value="ячейка ${i} ${j}"></td>`;
}
}
function cp() {
let valueAll = Array.from(t.querySelectorAll('input'), ({
value
}) => value).join('<br>')
document.body.insertAdjacentHTML('beforeend', valueAll)
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:33. |