عندما كنت أجري مقابلة مع الواجهة الأمامية من قبل ، واجهت سؤال مقابلة. لم يكن لدي أي أفكار في ذلك الوقت ، لذا لم أجيب عليها. اليوم قمت بفرزها وشاركتها معك:
السؤال الأصلي هو: استخدم طريقة الكائن لإنشاء جدول 2x2 ، يتطلب زرًا في الصف الثاني وخلية العمود الثاني. عند النقر فوق هذا الزر ، وقيمة الصف الأول وقيمة العمود الأول من الصف الثاني وقيمة العمود الأول من الصف الثاني ، راجع الشكل أدناه
إنشاء جدول
انقر فوق تأثير
أنا غبي. إذا كان لديك طريقة أفضل ، من فضلك قل لي. لقد فكرت في الأمر لفترة طويلة وحصلت أخيرًا على بعض النتائج:
1. إنشاء كائن جدول
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> وثيقة </title>
<style>
الجدول td {text-align: center ؛}
</style>
</head>
<body>
<h2> قم بإنشاء جداول باستخدام الكائنات </h2>
<script>
جدول var = {
Value1: "value1" ،
Value2: "Value2" ،
الصف: 2 ،
الخلية: 2 ،
إنشاء: function () {
// إنشاء جدول
var table = document.createElement ("table") ؛
table.border = 1 ؛
table.width = "500" ؛
// إنشاء زر
var button = document.createElement ("button") ؛
button.innerhtml = "switch" ؛
button.name = "qiehuan" ؛
button.setAttribute ("onClick" ، "Qiehuan ()") ؛
// إنشاء صف
لـ (var i = 0 ؛ i <this.row ؛ i ++) {
table.insertrow () ؛
}
// إنشاء عمود
لـ (var i = 0 ؛ i <this.cell ؛ i ++) {
Table.Rows [i] .insertcell () ؛
Table.Rows [i] .insertcell () ؛
}
// إضافة جدول إلى الجسم
document.body.appendchild (الجدول) ؛
var table = document.getElementSbyTagName ("table") [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 ("table") [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. أريد النقر فوق معرف/اسم/الجنس لتغيير الفرز:
إبداعي
تأثير
شفرة:
نسخة الكود كما يلي:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> وثيقة </title>
</head>
<body>
<griding>
<th colspan = "3"> انقر لاستبدال المحتوى </th>
<tr>
<td id = "id"> id </td>
<td id = "name"> الاسم </td>
<td> <span id = "sex"> sex </span> </td>
</r>
<tr>
<td> 1 </td>
<td> a </td>
<td> ذكر </td>
</r>
<tr>
<td> 2 </td>
<td> b </td>
<td> أنثى </td>
</r>
</table>
<script>
// تأثير الربط --- أنا غير صالح
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 ("table") [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>