Anonymous
Вызовите метод addeventListener от JavaScript, чтобы получить идентификатор строки из таблицы CreateElement, чтобы отобр
Сообщение
Anonymous » 11 фев 2025, 13:02
У меня есть простой код html javascript. Создание динамического вызова при вводе числа для события на онколе и создании динамической таблицы с использованием CreateElement. AddEventListener вызывается, когда флажок CreateElement проверяется. Теперь мне нужно, чтобы у меня был столбец Textbox рядом с флажком. Этот текстовый поток должен быть виден при проверке флага. Я был бы признателен, если бы кто -то мог быть полезным! Большое спасибо за чтение. < /P>
Код: Выделить всё
function displayDate(val) {
let thisrow = val.slice(-1)
let date = "date" + thisrow;
let thisDate = document.getElementById("date");
document.getElementById('thisDate').style.display = "";
}
function showTable(val) {
var tempNo = val;
if (tempNo != 0 || tempNo != null) {
var root = document.getElementById("thisDiv");
var table = document.createElement('table');
table.className = "toggleTable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var rowcnt = val;
headerList = ["School", "Address", "Date"];
var tr = document.createElement('tr');
// Header row
for (var j = 0; j < 3; j++) {
var th = document.createElement('th'); //column
var text = document.createTextNode(headerList[j]); //cell
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < rowcnt; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
var school = "";
var address = "";
var date = "";
var curcolumn = i + 1;
school = curcolumn;
for (var j = 0; j < 4; j++) {
if (i >= 0 && j == 0) {
var input = document.createElement("input");
input.type = "text";
input.name = "school" + curcolumn;
input.value = school;
input.id = "school" + curcolumn;
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
} else if (i >= 0 && j == 1) {
var input = document.createElement("input");
input.type = "checkbox";
input.name = "address" + curcolumn;
input.value = address;
input.id = "address" + curcolumn;
input.class = "dynamic";
input.addEventListener('click', function() {
displayDate(this.name); // logs the className of my_element
}, false);
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
} else if (i >= 0 && j == 3) {
var input = document.createElement("input");
input.type = "text";
input.name = "date" + curcolumn;
input.value = date;
input.id = "date" + curcolumn;
input.style = "display:none";
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
}
}
}
root.appendChild(table);
}
}
function onSavePressed() {
schoolCnt = document.getElementById('schoolCnt').value;
myData = "";
var schoolList = {};
for (var i = 1; i
body {
margin-left: 240px;
margin-top: 50px;
}
table {
border-collapse: collapse;
}
td,
th {
border: 0px solid black;
padding: 10px;
height: 2px;
}
#label {
font-size: 14px;
text-align: right;
}
table.schoolTable {
margin: 10px 30px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
width: 600px;
border: 0px solid black;
}
.schoolTable input[type=text] {
font-size: 12px;
border: 1px solid #73AD21;
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 18px;
text-align: center;
width: 210px;
height: 30px;
}
.schoolTable input[type=checkbox] {
font-size: 25px;
border: 1px solid #73AD21;
cursor: pointer;
font-family: verdana, arial, sans-serif;
text-align: left;
height: 25px;
width: 80px;
}
.toggleTable {
width: 950px;
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: #517994;
background-color: lightblue;
margin-left: 20px;
}
.toggleTable input[type=text] {
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 14px;
text-align: center;
height: 25px;
width: 100%;
}
.toggleTable input[type=checkbox] {
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 14px;
text-align: left;
height: 25px;
width: 80%;
}
.toggleTable td {
font-size: 14px;
border: 0px solid #73AD21;
}
.toggleTable th {
width: 5%;
font-size: 13px;
}
.hide {
display: none;
}< /code>
School
School Count :
Подробнее здесь:
https://stackoverflow.com/questions/794 ... ment-table
1739268155
Anonymous
У меня есть простой код html javascript. Создание динамического вызова при вводе числа для события на онколе и создании динамической таблицы с использованием CreateElement. AddEventListener вызывается, когда флажок CreateElement проверяется. Теперь мне нужно, чтобы у меня был столбец Textbox рядом с флажком. Этот текстовый поток должен быть виден при проверке флага. Я был бы признателен, если бы кто -то мог быть полезным! Большое спасибо за чтение. < /P> [code]function displayDate(val) { let thisrow = val.slice(-1) let date = "date" + thisrow; let thisDate = document.getElementById("date"); document.getElementById('thisDate').style.display = ""; } function showTable(val) { var tempNo = val; if (tempNo != 0 || tempNo != null) { var root = document.getElementById("thisDiv"); var table = document.createElement('table'); table.className = "toggleTable"; var tblB = document.createElement('tbody'); table.appendChild(tblB); var rowcnt = val; headerList = ["School", "Address", "Date"]; var tr = document.createElement('tr'); // Header row for (var j = 0; j < 3; j++) { var th = document.createElement('th'); //column var text = document.createTextNode(headerList[j]); //cell th.appendChild(text); tr.appendChild(th); } tblB.appendChild(tr); for (var i = 0; i < rowcnt; i++) { var tr = document.createElement('tr'); tblB.appendChild(tr); var td = document.createElement('td'); var school = ""; var address = ""; var date = ""; var curcolumn = i + 1; school = curcolumn; for (var j = 0; j < 4; j++) { if (i >= 0 && j == 0) { var input = document.createElement("input"); input.type = "text"; input.name = "school" + curcolumn; input.value = school; input.id = "school" + curcolumn; const td = document.createElement('td'); td.appendChild(input); tr.appendChild(td); } else if (i >= 0 && j == 1) { var input = document.createElement("input"); input.type = "checkbox"; input.name = "address" + curcolumn; input.value = address; input.id = "address" + curcolumn; input.class = "dynamic"; input.addEventListener('click', function() { displayDate(this.name); // logs the className of my_element }, false); const td = document.createElement('td'); td.appendChild(input); tr.appendChild(td); } else if (i >= 0 && j == 3) { var input = document.createElement("input"); input.type = "text"; input.name = "date" + curcolumn; input.value = date; input.id = "date" + curcolumn; input.style = "display:none"; const td = document.createElement('td'); td.appendChild(input); tr.appendChild(td); } } } root.appendChild(table); } } function onSavePressed() { schoolCnt = document.getElementById('schoolCnt').value; myData = ""; var schoolList = {}; for (var i = 1; i body { margin-left: 240px; margin-top: 50px; } table { border-collapse: collapse; } td, th { border: 0px solid black; padding: 10px; height: 2px; } #label { font-size: 14px; text-align: right; } table.schoolTable { margin: 10px 30px; font-family: verdana, arial, sans-serif; font-size: 11px; width: 600px; border: 0px solid black; } .schoolTable input[type=text] { font-size: 12px; border: 1px solid #73AD21; cursor: pointer; font-family: verdana, arial, sans-serif; font-size: 18px; text-align: center; width: 210px; height: 30px; } .schoolTable input[type=checkbox] { font-size: 25px; border: 1px solid #73AD21; cursor: pointer; font-family: verdana, arial, sans-serif; text-align: left; height: 25px; width: 80px; } .toggleTable { width: 950px; border-width: 1px; padding: 1px; border-style: solid; border-color: #517994; background-color: lightblue; margin-left: 20px; } .toggleTable input[type=text] { cursor: pointer; font-family: verdana, arial, sans-serif; font-size: 14px; text-align: center; height: 25px; width: 100%; } .toggleTable input[type=checkbox] { cursor: pointer; font-family: verdana, arial, sans-serif; font-size: 14px; text-align: left; height: 25px; width: 80%; } .toggleTable td { font-size: 14px; border: 0px solid #73AD21; } .toggleTable th { width: 5%; font-size: 13px; } .hide { display: none; }< /code> School School Count : [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/79429496/call-javascripts-addeventlistener-method-to-get-row-id-from-createelement-table[/url]