Question

希望你们能帮忙解决这个问题。我有数以千计的这些表要转换。

实施例

<table>
  <thead>
    <tr>
      <td>Institutional Metrics</td>
      <td>Institutional Targets</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>example</td>
      <td>example 2</td>
    </tr>
  </tbody>
</table>

对于<td>部分中的每个<thead>，它应该是<th scope="col">。 <td>中的每个<tbody>都应为<th scope="row">。

我尝试了一些不同的东西，似乎没什么用。任何帮助都会很棒！

修改

我认为增加的是他们是从MS Word导入的。所以我写了这么代码来清理它们。

function cleanUp(){

    var searchInput = document.getElementById('userInput').value;

    //clense it
    searchInput = searchInput.replace( /\btd\s\w\w\w\w\w\W\W\d\d\d\W\s\w\w\w\w\w\w\W\W\w\w\w\W/g, 'td');
    searchInput = searchInput.replace( /(<td>)+/g, '<td>\n');
    searchInput = searchInput.replace( /(<tr>)/, '<thead>\n<tr>');
    searchInput = searchInput.replace( /(<\/tr>)/, '</tr>\n</thead>\n<tbody>');
    searchInput = searchInput.replace( /(<\/table>)/, '</tbody>\n</table>');

    //replacement



    //output
    document.getElementById('updated').innerHTML = searchInput;
    document.getElementById('howTo').style.display ='block';

}

<div><textarea placeholder="Paste in your code" style="width:900px; height:300px;" id="userInput"></textarea></div>

<div><textarea style="width:900px; height:300px;" id="updated"></textarea></div>

<div>
    <button onclick="cleanUp()">Run Script</button>
    <br>
    <div id="howTo" style="display: none;"><p>Use the <strong>|</strong> for Excel data import and selection separation. <a id="download" href="">Download .txt file</a>.</p>

</div>

更新 - 最终

谢谢大家！搞定了！

<script type="text/javascript">

function cleanUp(){

    var searchInput = document.getElementById('userInput').value;

    //clense it
    searchInput = searchInput.replace( /\btd\s\w\w\w\w\w\W\W\d\d\d\W\s\w\w\w\w\w\w\W\W\w\w\w\W/g, 'td');
    searchInput = searchInput.replace( /(<td>)+/g, '<td>\n');
    searchInput = searchInput.replace( /(<tr>)/, '<thead>\n<tr>');
    searchInput = searchInput.replace( /(<\/tr>)/, '</tr>\n</thead>\n<tbody>');
    searchInput = searchInput.replace( /(<\/table>)/, '</tbody>\n</table>');

    //output
    document.getElementById('updated').innerHTML = searchInput;

    //final cleaning
    document.querySelectorAll('table > thead > tr > td').forEach(function(el) {
      var th = document.createElement("th");
      th.setAttribute("scope", "col");
      th.innerHTML = el.innerHTML
      el.parentNode.replaceChild(th, el);
    });

    document.querySelectorAll('table > tbody > tr > td:first-child').forEach(function(el) {
      var th = document.createElement("th");
      th.setAttribute("scope", "row");
      th.innerHTML = el.innerHTML
      el.parentNode.replaceChild(th, el);
    });

    var finalInput = document.getElementById('updated').innerHTML;

    //output
    document.getElementById('updatedFinal').innerHTML = finalInput;
}

</script>

Answer 1

最好的方法是更改标记本身。无论如何，您可以替换需要定位的outerHTML td - 请使用vanilla javascript查看下面的演示：

Array.prototype.forEach.call(document.querySelectorAll('table > thead > tr > td'), function(e){
  e.outerHTML = '<th scope="row">' + e.innerHTML + '</th>';
});

Array.prototype.forEach.call(document.querySelectorAll('table > tbody > tr > td:first-child'), function(e){
  e.outerHTML = '<th scope="row">' + e.innerHTML + '</th>';
});

th[scope=row] {
  color: red;
}

<table>
  <thead>
    <tr>
      <td>Institutional Metrics</td>
      <td>Institutional Targets</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>example</td>
      <td>example 2</td>
    </tr>
  </tbody>
</table>

使用DOMParser更新了答案，该textarea转换了function cleanUp() { var parser = new DOMParser(); var html = parser.parseFromString(document.getElementById('userInput').value, "text/html"); Array.prototype.forEach.call(html.querySelectorAll('table > thead > tr > td'), function(e) { e.outerHTML = '<th scope="row">' + e.innerHTML + '</th>'; }); Array.prototype.forEach.call(html.querySelectorAll('table > tbody > tr > td:first-child'), function(e) { e.outerHTML = '<th scope="row">' + e.innerHTML + '</th>'; }); document.getElementById('updatedFinal').value = html.querySelector('table').outerHTML; }中输入的 html字符串：

<div><textarea placeholder="Paste in your code" style="width:900px; height:300px;" id="userInput"></textarea></div>

<div>
  <button onclick="cleanUp()">Run Script</button>
</div>

<div><textarea style="width:900px; height:300px;" id="updatedFinal"></textarea></div>

{{1}}

Answer 2

对于替代解决方案，可以使用

代码示例：

注意：我的代码的灵感来自于@ kukkuz的回答

document.querySelectorAll('table > thead > tr > td').forEach(function(el) {
  var th = document.createElement("th");
  th.setAttribute("scope", "col");
  th.innerHTML = el.innerHTML
  el.parentNode.replaceChild(th, el);
});

document.querySelectorAll('table > tbody > tr > td:first-child').forEach(function(el) {
  var th = document.createElement("th");
  th.setAttribute("scope", "row");
  th.innerHTML = el.innerHTML
  el.parentNode.replaceChild(th, el);
});

table,
td,
th {
  border: 1px solid #ccc;
}

th[scope=row] {
  color: red;
}

th[scope=col] {
  color: blue;
}

<table>
  <thead>
    <tr>
      <td>Institutional Metrics</td>
      <td>Institutional Targets</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>example</td>
      <td>example 2</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用replaceWith方法。

replaceWith函数替换匹配集中的每个元素元素与提供的新内容并返回元素集已被删除。

$('thead tr').each(function(){
  $(this).find('td').each(function(){
    $(this).replaceWith('<th scope="col">'+$(this).html()+'</th>');
  });
});
$('tbody tr').each(function(){
  $(this).find('td').each(function(){
    $(this).replaceWith('<th scope="row">'+$(this).html()+'</th>');
  });
});
console.log($('table').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Institutional Metrics</td>
      <td>Institutional Targets</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>example</td>
      <td>example 2</td>
    </tr>
  </tbody>
</table>

Answer 4

使用replaceWith。但它将取代整个事物包括文本内容。要保留文本内容，首先将其复制到另一个变量，然后将其附加到新元素。

$('tr').each(function() {
  var content = $('<th scope="col">');
  content.html($(this).html());
  $(this).replaceWith(content);
  
});
$('td:first-child').each(function() {
  var content = $('<th scope="row">');
  content.html($(this).html());
  $(this).replaceWith(content);
  
});

console.log($('table').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Institutional Metrics</td>
      <td>Institutional Targets</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>example</td>
      <td>example 2</td>
    </tr>
  </tbody>
</table>

Answer 5

这是一个简单而纯粹的JavaScript解决方案。

var theadTds = document.querySelectorAll('thead td')

theadTds.forEach(function(td){
  td.setAttribute("scope", "row")
})

var tbodyTds = document.querySelectorAll('tbody tr>td:first-child')

tbodyTds.forEach(function(td){
  td.setAttribute("scope", "row")
})

替换HTML元素

5 个答案: