追加jQueryは、絶対位置の次の表のセルにHTMLを追加します。

Question

jQueryを使用してスパン要素をテーブル分割線に追加しています（ただし、この質問はcss/htmlです）。

私はpositionアブソリュート（これは私のwidth属性に必要です）を使い始めたので、今度は私が望むものに沿って次のテーブルディバイダに追加します。

が

$(document).ready(function() { 
 
    var var1 = 2 
 
    var element = $('td').filter(function() { 
 
    var holidayText = $(this).contents()[0].textContent.trim(); 
 
    return parseInt(holidayText, 10) == var1; 
 
    }); 
 
    var cell_width = element.width(); 
 

 
    var2 = 3; 
 
    var width = var2 * cell_width; 
 

 
    add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>'); 
 
});

div.class1 { 
 
    position: relative; 
 
} 
 

 
table { 
 
    border: 1px solid navy; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 

 
table th { 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 20px; 
 
} 
 

 
table td { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    text-align: right; 
 
    border: 1px solid #c6c6ec; 
 
} 
 

 
span.spanclass { 
 
    background-color: purple; 
 
    height: 14px; 
 
    display: inline-block; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

の下を参照してください私は... APPENDは要素の中にそれを置くことを考えたので、私は少し混乱していますか？

これを修正するにはどうすればよいですか？おかげ

Answer 1

spanがtdに関連して配置されている意味しますtdの必要性position: relative;、そしてspan sがtd

div.class1 { 
 
\t position: relative; 
 
} 
 
table { 
 
\t border:1px solid navy; 
 
\t width: 70%; 
 
\t text-align: center; 
 
} 
 
table th { 
 
\t text-align: center; 
 
\t width:100px; 
 
\t height:20px; 
 
} 
 
table td { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t vertical-align: top; 
 
\t text-align: right; 
 
\t border: 1px solid #c6c6ec; 
 
    position: relative; 
 
} 
 
span.spanclass { 
 
\t background-color: purple; 
 
\t height: 14px; 
 
\t display: inline-block; 
 
\t padding: 2px; 
 
    top: 0; left: 0; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<script> 
 
$(document).ready(function() { 
 
    var var1 = 2 
 
    var element = $('td').filter(function() { 
 
    var holidayText = $(this).contents()[0].textContent.trim(); 
 
    return parseInt(holidayText, 10) == var1; 
 
    }); 
 
    var cell_width = element.width(); 
 

 
    var2 = 3; 
 
    var width = var2*cell_width; 
 
    
 
    add_html = element.append('</br><span class="spanclass" style="width: '+width+'px; position: absolute"></span>'); 
 

 
}); 
 
</script>

でそれらを配置する topと left値を必要とします