Мобильная версия- Прямо сейчас нажатие любой кнопки «Добавить строку» клонирует вторую строку и добавляет клон в конец таблицы. Это добавляет строку, но не сохраняет целостность таблицы. Если я нажму кнопку «Добавить дочернюю строку», находясь в строке 1.C, я хочу добавить второй экземпляр 1.C и сохранить эти значения, но последовательно обновлять номера проблем. Он работает путем добавления строки, но не работает удобным для пользователя способом, что имеет смысл.
- Кнопки «Удалить» должны быть только у вновь добавленных строк. Я добавлял их повсюду в качестве заполнителя для проверки, но таблица по умолчанию должна оставаться статической, и удалять можно только вновь добавленные строки.
Код: Выделить всё
function insRow()
{
var x=document.getElementById('myTable');
// deep clone the targeted row
var new_row = x.rows[2].cloneNode(true);
// get the total number of rows
var len = x.rows.length;
// set the innerHTML of the first row
new_row.cells[0].innerHTML = len;
// append the new row to the table
x.appendChild( new_row );
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}Код: Выделить всё
.req {
color: #cd2727;
}
table {
width: 100%;
}
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: center;
vertical-align: middle;
}
td {
text-align: center;
vertical-align: middle;
}
tr:nth-child(even) {background: #d4ebf2}
tr:nth-child(odd) {background: # F F F } < / c o d e > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - h t m l l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; t a b l e i d = " m y T a b l e " & g t ; < b r / > & l t ; t h e a d & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t h i d = " c o l 1 h e a d e r " & g t ; I s s u e N u m b e r & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 2 h e a d e r " & g t ; T e s t N a m e & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 3 h e a d e r " & g t ; T e s t I D & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 4 h e a d e r " & g t ; T e s t R e s u l t & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 5 h e a d e r " & g t ; B r o w s e r U s e d & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 6 h e a d e r " & g t ; T e s t e r C o m m e n t s & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 7 h e a d e r " & g t ; L o c a t i o n / S c r e e n & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 8 h e a d e r " & g t ; G l o b a l I s s u e & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 9 h e a d e r " & g t ; S c r e e n s h o t & l t ; / t h & g t ; < b r / > & l t ; t h i d = " c o l 1 0 h e a d e r " & g t ; A c t i o n s & l t ; / t h & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; / t h e a d & g t ; < b r / > & l t ; t b o d y & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t h s c o p e = " r o w " i d = " r o w n u m 1 " & g t ; 0 1 & l t ; / t h & g t ; < b r / > & l t ; t d & g t ; A l t - v e r s i o n - c o n f o r m a n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 1 . A & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; < b r / > & l t ; s e l e c t c l a s s = " f o r m - s e l e c t b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y = " c o l 4 h e a d e r r o w n u m 1 " & g t ; < b r / > & l t ; o p t i o n & g t ; P a s s & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n & g t ; F a i l & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n & g t ; D o e s N o t A p p l y & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; < b r / > & l t ; s e l e c t c l a s s = " f o r m - s e l e c t b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y = " c o l 5 h e a d e r r o w n u m 1 " & g t ; < b r / > & l t ; o p t i o n & g t ; C h r o m e & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n & g t ; E d g e & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n & g t ; F i r e f o x & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; & l t ; t e x t a r e a c l a s s = " f o r m - c o n t r o l b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y = " c o l 6 h e a d e r r o w n u m 1 " & g t ; & l t ; / t e x t a r e a & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; & l t ; t e x t a r e a c l a s s = " f o r m - c o n t r o l b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y = " c o l 7 h e a d e r r o w n u m 1 " & g t ; & l t ; / t e x t a r e a & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; < b r / > & l t ; s e l e c t c l a s s = " f o r m - s e l e c t b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y = " c o l 8 h e a d e r r o w n u m 1 " & g t ; < b r / > & l t ; o p t i o n & g t ; Y e s & l t ; / o p t i o n & g t ; < b r / > & l t ; o p t i o n & g t ; N o & l t ; / o p t i o n & g t ; < b r / > & l t ; / s e l e c t & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; < b r / > & l t ; b u t t o n t y p e = " b u t t o n " c l a s s = " b t n b t n - s u c c e s s " o n c l i c k = " i n s R o w ( ) " & g t ; A d d C h i l d R o w & l t ; / b u t t o n & g t ; < b r / > & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > < b r / > & l t ; t r & g t ; < b r / > & l t ; t h s c o p e = " r o w " i d = " r o w n u m 2 " & g t ; 0 2 & l t ; / t h & g t ; < b r / > & l t ; t d & g t ; A l t - v e r s i o n - e q u i v a l e n t & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; 1 . B & l t ; / t d & g t ; < b r / > & l t ; t d & g t ; < b r / > & l t ; s e l e c t c l a s s = " f o r m - s e l e c t b o r d e r b o r d e r - d a r k " a r i a - l a b e l e d b y ="col4header rownum2">
Pass
Fail
Does Not Apply
Chrome
Edge
Firefox
Yes
No
Add Child Row
Delete This Row
03
Alt-version-access
1.C
Pass
Fail
Does Not Apply
Chrome
Edge
Firefox
Yes
No
Add Child Row
Delete This Row
04
Non-interference
1.D
Pass
Fail
Does Not Apply
Chrome
Edge
Firefox
Yes
No
Add Child Row
Delete This Row
Это не идеально, но это то, над чем я работал до сих пор.
- Есть левый столбец с номером проблемы. Я бы хотел сохранить последовательность, чтобы можно было сказать: «см. проблему № 10».
- Я хочу, чтобы пользователи могли удалять только дочерние/родственные строки, но не исходные строки. Итак, всегда существует проблема 1.A, но вы можете добавлять/удалять одноуровневые проблемы 1.A.
- Когда добавляются новые строки, я хочу, чтобы они имели какие-то уникальные идентификаторы в массиве или что-то в этом роде, чтобы они могли сохранять свои уникальные метки с помощью aria-labeledby.
Подробнее здесь: https://stackoverflow.com/questions/798 ... ws-need-to
