أتذكر أنني واجهت مثل هذه المشكلة أثناء المقابلة: يوجد نموذج، ثم هناك 4 صناديق إدخال وزر دمج، يبدو مربع الإدخال هكذا، من أي صف إلى أي صف، ومن أي عمود إلى أي عمود ، ثم انقر فوق الزر للدمج. عندما خرجت من المدرسة، كنت أعرف القليل فقط عن JS، لكنني لم أتمكن من فعل ذلك على الإطلاق! الآن بعد أن فكرت في الأمر، هذا السؤال يختبر في الواقع ما إذا كانت المهارات الأساسية قوية أم لا! إذا كنت مهتمًا، يمكنك القيام بذلك بنفسك واختبار ما إذا كان بإمكانك القيام بذلك. لقطة شاشة للسؤال:
يبدو أن حل هذه المشكلة الآن بسيط، لكنه استغرق وقتًا طويلاً، ربما كان تفكيري خاطئًا؟ الشيء الرئيسي هو استخدام js لتشغيل html. لقد قمت الآن بتنفيذ إضافة صفوف وحذف صفوف وإضافة أعمدة وحذف الأعمدة. ومع ذلك، لا يمكن تحقيق دمج الخلايا بشكل كامل، ويرجع ذلك أساسًا إلى أنه سيتم العبث بالجدول. الآن انشر هذا السؤال، يمكن للزملاء المهتمين دراسته عندما يكون لديهم الوقت ومعرفة ما إذا كان بإمكانهم الإجابة عليه! المشكلة الأساسية هي دمج الخلايا! يمكنك أيضًا مساعدتي في معرفة مشكلة دمج الخلايا.
جزء من الكود الذي قمت بتنفيذه بنفسي:
الجزء أتش تي أم أل يكتب
انسخ رمز الكود كما يلي:
<body onLoad="init();">
<معرف الجدول = "الجدول" محاذاة = "المركز">
<tbody id="newbody"></tbody>
</الجدول>
<ديف>
<جدول محاذاة = "المركز">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="إضافة صف"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="إزالة الصف"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="إزالة العمود"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="إضافة عمود"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="إضافة صف"/>< /تد></tr>
</الجدول>
</div>
<ديف>
<جدول محاذاة = "المركز">
<tr><td>من السطر <input type = "text" id = "beginRow" name = "beginRow" value = ""/> إلى قيمة <input type = "text" name = "endRow" id = "endRow"" =""/> صف</td><tdrowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="Merge" onClick="rebulid();"/> </td></tr>
<tr><td>من العمود <input type = "text" name = "beginCol" id = "beginCol" value = ""/> إلى قيمة <input type = "text" name = "endCol" id = "endCol"" =""/> العمود</td></tr>
</الجدول>
</div>
</الجسم>
إنشاء جدول باستخدام كتب appendChild
انسخ رمز الكود كما يلي:
وظيفة الحرف الأول () {
_table=document.getElementById("table");
_table.border="1px";
_table.width="800px";
ل(فار ط=1;أنا<10;i++){
varrow=document.createElement("tr");
Row.id=i;
ل(فار ي=1;ي<6;ي++){
var cell=document.createElement("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode ("th"+cell.id+"column"));
Row.appendChild (خلية)؛
}
document.getElementById("newbody").appendChild (row);
}
}
لإضافة الصف، اكتب باستخدام طريقة appendChild
انسخ رمز الكود كما يلي:
وظيفة إضافة الصف () {
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=length+1;
var td=document.createElement("td");
ل(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("th"+td.id+"column"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild (tr);
}
طريقة أخرى لإضافة صفوف كتب InsertRow
انسخ رمز الكود كما يلي:
وظيفة addRow_withInsert(){
varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
varrowCount =document.getElementById("table").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="new"+(rowCount)+"/"+(i+1)+"column";
cell.id=(rowCount)+"/"+(i+1);
}
}
لحذف صف، استخدم حذف رو (فهرس الصف) المكتوب
انسخ رمز الكود كما يلي:
/*حذف الصفوف باستخدامdeletRow(فهرس الصف)*/
وظيفة إزالة الصف () {
/* varrow=document.getElementById("2");
فار فهرس=row.rowIndex;
تنبيه (الفهرس)؛ */
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
لإضافة عمود، استخدم طريقة InsertCell (موضع العمود) للكتابة
انسخ رمز الكود كما يلي:
وظيفة addCell(){
/*document.getElementById("table").rows.item(0).cells.length
يستخدم لمعرفة عدد الأعمدة في الجدول
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="عمود "+(i+1)+"/"+3+";
}
}
لحذف عمود، استخدم طريقة الحذف (موضع العمود) للكتابة
انسخ رمز الكود كما يلي:
/*حذف عمود باستخدام طريقةdeleteCell(موضع العمود)*/
وظيفة إزالة الخلية () {
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
كتب دمج الخلايا (لم تنفذ).
هناك مشكلة في الكود الخاص بي، ويرجع ذلك أساسًا إلى أن الجدول سيتم إفساده، ولم يتم تصحيحه:
انسخ رمز الكود كما يلي:
وظيفة ريبوليد () {
var beginRow=document.getElementById("beginRow").value;/*بدء الصف*/
var endRow=document.getElementById("endRow").value;/*نهاية الصف*/
var beginCol=document.getElementById("beginCol").value;/*عمود البدء*/
var endCol=document.getElementById("endCol").value;/*عمود النهاية*/
var tempCol=beginRow+"/"+beginCol;/*حدد موقع العمود الذي تريد تغيير سماته*/
تنبيه (درجة الحرارة)؛
var td=document.getElementById(tempCol);
/*حذف الخلايا المراد دمجها*/
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
إذا (x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
آخر{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}