HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOM列スパンプロパティ

HTML DOM列のspanプロパティは、HTMLの要素内のcolspan属性に関連付けられています。 colSpanプロパティを使用して、テーブルのcolspan属性を設定または返すことができます。 colspan属性は、noを作成するために使用されます。テーブルがまたがる列の数。

構文

以下は、-

の構文です。 
tabledataObject.colSpan = number

ここで、numberは、テーブルがまたがる列の数を表します。

例

colSpanプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
   var x=document.getElementsByClassName("TD1").length;
   function changeSpan() {
      for(var i=0;i<=x;i++){
         document.getElementsByClassName("TD1")[i].colSpan = "1";
      }
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOM列スパンプロパティ

変更をクリックすると-

HTMLDOM列スパンプロパティ

上記の例では-

2行目から始まる最初の要素、つまり1月と2月のcolspanが2に等しいテーブルを作成しました。これにより、テーブルは3行3列になります。テーブルには、他のテーブルとは異なって見えるようにスタイルが適用されています-

table, th, td {
   border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>

次に、ユーザーがクリックしたときにchangeSpan（）メソッドを実行するCHANGEボタンを作成しました-

<button onclick="changeSpan()">CHANGE</button>

changeSpan（）メソッドは、ドキュメントオブジェクトでgetElementsByClassName（）メソッドを使用し、インデックスを使用して両方にアクセスすることで、両方の

要素を取得します。次に、両方の
要素のcolSpan属性値を取得し、それらを2から1-

に変更します。 
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
   for(var i=0;i<=x;i++){
      document.getElementsByClassName("TD1")[i].colSpan = "1";
   }
}

  1. HTMLDOMOlタイププロパティ

    HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style>   &n

  2. HTML DOMOlstartプロパティ

    HTML DOM Ol startプロパティは、順序付きリストのstart属性の値を設定/返します。 以下は構文です- 数値を返す olObject.start 開始の設定 番号に olObject.start = number Ol startの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol start</title> <style>    form {       widt