Когда я раньше брал интервью у фронта, я столкнулся с вопросом интервью. У меня не было никаких мыслей в то время, поэтому я не ответил на это. Сегодня я разобрался и поделился с вами:
Оригинальный вопрос: используйте метод объекта для создания таблицы 2x2, требующей кнопки во второй строке и ячейке второго столбца. При нажатии на эту кнопку значение первой строки и значение первого столбца второй строки и значение первого столбца второй строки см. Рисунок ниже
Создать таблицу
Щелкните эффект
Я глупый. Если у вас есть лучший способ, пожалуйста, скажите мне. Я думал об этом в течение долгого времени и, наконец, получил некоторые результаты:
1. Создать объект таблицы
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
<style>
Таблица td {text-align: center;}
</style>
</head>
<тело>
<h2> Создать таблицы с помощью объектов </h2>
<Скрипт>
var table = {
Значение1: "Значение1",
значение2: "value2",
ряд: 2,
ячейка: 2,
create: function () {
// Создать таблицу
var table = document.createElement ("таблица");
Table.border = 1;
Table.width = "500";
// создать кнопку
var button = document.createElement ("кнопка");
button.innerhtml = "switch";
button.name = "Qiehuan";
button.setattribute ("onclick", "Qiehuan ()");
// Создать ряд
for (var i = 0; i <this.row; i ++) {
table.insertrow ();
}
// Создать столбец
for (var i = 0; i <this.cell; i ++) {
table.rows [i] .insertcell ();
table.rows [i] .insertcell ();
}
// Добавить таблицу в тело
document.body.appendchild (таблица);
var table = document.getElementsbytagname ("таблица") [0];
var row1 = table.rows [0];
var row2 = table.rows [1];
table.rows [1] .cells [1] .appendchild (кнопка);
var a = row1.cells [0] .innerhtml = this.value1;
var b = row2.cells [0] .innerhtml = this.value2;
}
}
table.create ();
</script>
</body>
</html>
Эффект создания табличного метода:
Нажмите, чтобы переключить код:
Кода -копия выглядит следующим образом:
Функция qiehuan () {
// Получить таблицу
var table = document.getElementsbytagname ("таблица") [0];
// получить Tr
var row1 = table.rows [0];
var row2 = table.rows [1];
// Обмен контент
// Создание новых элементов для хранения данных
var a = row1.cells [0] .innerhtml;
var b = row2.cells [0] .innerhtml;
row1.cells [0] .innerhtml = b;
row2.cells [0] .innerhtml = a;
}
Нажатие на кнопку переключения:
Расширение:
1. Я хочу нажать на ID/имя/секс, чтобы изменить сортировку:
оригинал
Эффект
Код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
</head>
<тело>
<Таблица>
<th colspan = "3"> нажмите, чтобы заменить контент </th>
<tr>
<td id = "id"> id </td>
<td id = "name"> name </td>
<td> <span id = "sex"> sex </span> </td>
</tr>
<tr>
<td> 1 </td>
<Td> a </td>
<TD> мужчина </td>
</tr>
<tr>
<td> 2 </td>
<Td> b </td>
<Td> Женщина </td>
</tr>
</table>
<Скрипт>
// Эффект связывания --- Я недействителен
document.getElementById ('id'). addEventListener ('click', f_switch, false);
document.getElementById ('name'). addEventListener ('click', f_switch, false);
document.getElementById ('sex'). addEventListener ('click', f_switch, false);
функция f_switch () {
// Получить таблицу
var table = document.getElementsbytagname ("таблица") [0];
// Получить элемент строки
var row1 = table.rows [2];
var row2 = table.rows [3];
// Метод 1
// Создание новых элементов для хранения данных
var newRow = document.createElement ("tr");
var newhtml = newRow.innerhtml = row2.innerhtml;
var newRow2 = document.createElement ("tr");
var newhtml2 = newRow2.innerhtml = row1.innerhtml;
//заменять
row1.innerhtml = newhtml;
row2.innerhtml = newhtml2;
// Метод 2
// Я не понимаю ... можно реализовать следующее предложение
//table.appendchild(row1);
}
</script>
<br>
</body>
</html>