You are here
Home > آموزش > اضافه کردن td به table با جاوااسکریپت

اضافه کردن td به table با جاوااسکریپت

در صورتی که نیاز باشد یک سلول جدید را به جدول اضافه کنیم که در تمام ردیف ها اضافه شود باید از جاوااسکریپت کمک بگیریم.

مثال زیر نمونه ای از این مدل میباشد

کدهای html
<table>
  <tr class="myTr">
    <td id="1">Hello</td>
  </tr>
</table>

<input type="button" value="click here" onclick="insert();">
جاوااسکریپت
function insert(){
   var row = document.getElementsByClassName("myTr")[0];
   var x = row.insertCell(1);//محلی که سلول جدید اضافه شود
   x.innerHTML="New cell";//مقدار درون سلول
}

در صورتی که تعداد tr ها بیشتر از یک ردیف هست ، اول باید تعدادشون رو پیدا کنیم و بعد به همون تعداد دستور ساخت سلول جدید را اجرا کنیم

کدهای html
<table>
  <tr class="myTr1 allTr">
    <td id="1">Hello</td>
  </tr>
 <tr class="myTr2 allTr">
    <td id="1">Hello</td>
  </tr>
</table>

<input type="button" value="click here" onclick="insert();">
var elementid = document.getElementsByClassName("allTr").length;
var k;
    for(k = 1;k <= elementid; k++)
    {
        insertTd(k);
    }
function insertTd(){
   var row = document.getElementsByClassName("myTr"+k)[0];
   var x = row.insertCell(1);//محلی که سلول جدید اضافه شود
   x.innerHTML="New cell";//مقدار درون سلول
}

دیدگاهتان را بنویسید

Top