JSFiddle - React, Tailwind, and code Playground

by aarkuo17

HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td class="aa" valign="top">
          <span id="MainContent_sPa788_Siuma1_U"><span id="MainContent_sPa788_Siuma1Name">Siuma1</span><br></span>
          <div>
            <table border="1" cellpadding="2" cellspacing="0" id="MainContent_sPa788_Siuma1" rules="all">
              <tbody>
                <tr>
                  <th scope="col"><input id="MainContent_sPa788_Siuma1_SelAll" name=
                  "ctl00$MainContent$sPa788_Siuma1$ctl01$SelAll" onclick="ssa(this,'_sPa788_Siuma1_sR_');" type=
                  "checkbox"></th>
                  <th scope="col">&nbsp;</th>
                  <th scope="col">員工工號</th>
                  <th scope="col">WORKFLOW單號</th>
                  <th scope="col">出差日期</th>
                  <th scope="col">天數</th>
                  <th scope="col">類型</th>
                </tr>
                <tr>
                  <td align="left" valign="middle"><input id="MainContent_sPa788_Siuma1_sR_0" name=
                  "ctl00$MainContent$sPa788_Siuma1$ctl02$sR" onclick=
                  "javascript:setTimeout('__doPostBack(\'ctl00$MainContent$sPa788_Siuma1$ctl02$sR\',\'\')', 0)" type=
                  "checkbox"></td>
                  <td><input id="MainContent_sPa788_Siuma1_失效_0" name="ctl00$MainContent$sPa788_Siuma1$ctl02$失效"
                  onclick="return confirm('確認失效?');" type="submit" value="失效"> <input id=
                  "MainContent_sPa788_Siuma1_詳情_0" name="ctl00$MainContent$sPa788_Siuma1$ctl02$詳情" onclick=
                  "return true;" type="submit" value="詳情"></td>
                  <td><span class="ovh" id="MainContent_sPa788_Siuma1_F0_0" title="李子茵">李子茵</span></td>
                  <td><span class="ovh" id="MainContent_sPa788_Siuma1_F1_0" title=
                  "HRT20200327001">HRT20200327001</span></td>
                  <td><span class="ovh" id="MainContent_sPa788_Siuma1_F2_0"...

CSS

table:first-of-type{
  
  /* 邊界框框是共用還是分開 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse */
  border-collapse:collapse; 
  
  
  
  /* 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout */
  table-layout: fixed;
  width: 700px;
    
}

td{
  border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
table{
  border:solid #add9c0; border-width:1px 0px 0px 1px;}


.aa th {
  
  /* 如何處理元素中的空白。
  nowrap --> 不能換行
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-spac */
  white-space:normal;
  }

.aa td {
  white-space:normal;
    /* 
  overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-wrap */
  word-wrap:break-word;
  /* CSS 属性 word-break 指定了怎样在单词内断行。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break */
  word-break:break-all;
}
  

/* 效果被JQ中的替代文字取代了 */
#MainContent_sPa788_Siuma1Name{
  color: DarkRed;
  font-weight: bold;
}

.ovh {
  /*水平排列，不會擠在一起   https://zh-tw.learnlayout.com/inline-block.html */
  /* display:inline-block; */
  width: 700px;
    /* 
  overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-wrap */
  word-wrap: break-word;
  /* CSS 属性 word-break 指定了怎样在单词内断行。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break */
  word-break: break-all;
} 

.tb2{
    overflow: hidden; 
 }

.tb2 td {
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
    max-width: 100px;
}

JavaScript

var a = $("#MainContent_sPa788_Siuma1_F4_1").css("width");
document.write(a);
document.write("<br />");
var b = $("th:contains('號')").text();
document.write(b);
document.write("<br />");




/* html()會帶出<br/> */
var c = $("td span[id='MainContent_sPa788_Siuma1_F1_3']").html();
document.write(c);
document.write("<br />");

/* text()不會帶出<br/> */
var d = $("td span[id='MainContent_sPa788_Siuma1_F1_3']").text();
document.write(d);
document.write("<br />");

/* 可以一次抓出一個至多個元素 */
$().ready(function() {
  $("td span:first").text(function(i, text) {
    return text.replace(/Siuma/g, 'HAHA');
  });
});

$("td span:first").css({"background-color":"yellow","font-size":"200%"});
/* document.write($("td span:first").text()); */

var e = document.getElementById("MainContent_sPa788_Siuma1Name").innerHTML;
document.write("e:", e);

var x=document.getElementsByTagName("span");
for (var i=0;i<x.length;i++){
console.log(x[i].innerHTML)}

document.getElementById("td1").style.fontWeight = "bold";