Question

由于我是Web开发的新手，我不确定哪个工具 - CSS或JavaScript可以实现这一点。

我的目标如下。我希望某个类的元素具有某个内容。例如，如果属于<input class = "tableRowChecker" type="checkbox">类，我希望我的所有“td”元素都有target_class之类的内容。目前我通过创建内容的隐藏“模型”，使其不可见，然后在加载文档后，找到所有td.target_class元素并通过隐藏的构建块的内容填充其html属性来实现此目的：

HTML：

$(function () {
		$('.target_class').html($('#building_block').html());
    $('button').on('click', function() {build_my_clone()});
});

function build_my_clone() {
	 alert("Don't know what to do here");
   // I don't like using clone, because it copies the object with the text values and
   // removing them and adding the new ones makes the element glimmer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = 'building_block' hidden><input class = "tableRowChecker" type="checkbox">
</div>

<button>Add new row</button>
<table class="my_table">
    <thead>
       <th style = 'width:1.5em'></th>
       <th></th>
    <thead>
    <tbody>
      <tr><td class = 'target_class'></td><td>A</td></tr>
      <tr><td class = 'target_class'></td><td>B</td></tr>
      <tr><td class = 'target_class'></td><td>C</td></tr>
    </tbody>

我的问题是，如果动态创建target_class类型的元素该怎么办。我不想在我的代码中的每个场合重复$('#target_class_dynamically_created_instance').html($('#building_block').html());。我有一个可怕的填充，这是垃圾代码，并有更直接的方式来做到这一点。是否有可能以某种方式通过CSS或LESS实现？

Answer 1

您可以将DOM侦听器用于这类操作系统。例如，

CMakeFiles\testfile.dir/objects.a(test.cpp.obj):test.cpp:(.text+0x35): undefined reference to `__imp__ZN16QCoreApplicationC1ERiPPci'
CMakeFiles\testfile.dir/objects.a(test.cpp.obj):test.cpp:(.text+0x3e): undefined reference to `__imp__ZN16QCoreApplication4execEv'
CMakeFiles\testfile.dir/objects.a(test.cpp.obj):test.cpp:(.text+0x50): undefined reference to `__imp__ZN16QCoreApplicationD1Ev'
CMakeFiles\testfile.dir/objects.a(test.cpp.obj):test.cpp:(.text+0x67): undefined reference to `__imp__ZN16QCoreApplicationD1Ev'
c:/winbuilds/bin/../lib64/gcc/x86_64-w64-mingw32/4.8.3/../../../../x86_64-w64-mingw32/bin/ld.exe: CMakeFiles\testfile.dir/objects.a(test.cpp.obj): bad reloc address 0xc in section `.xdata'
c:/winbuilds/bin/../lib64/gcc/x86_64-w64-mingw32/4.8.3/../../../../x86_64-w64-mingw32/bin/ld.exe: final link failed: Invalid operation
collect2.exe: error: ld returned 1 exit status
CMakeFiles\testfile.dir\build.make:127: recipe for target 'testfile.exe' failed
mingw32-make[2]: *** [testfile.exe] Error 1
CMakeFiles\Makefile2:66: recipe for target 'CMakeFiles/testfile.dir/all' failed
mingw32-make[1]: *** [CMakeFiles/testfile.dir/all] Error 2
Makefile:82: recipe for target 'all' failed
mingw32-make: *** [all] Error 2

我不确定。但请检查这些事件监听器以编写代码。希望它有所帮助。

Answer 2

在您的代码中，当您动态创建元素时，它们可以包含相应的类名和值。然后，CSS将根据提供给类，id等的规则提供样式。下面的代码显示了如何为您提供的示例执行此操作的示例。

HTML

<tbody id="table-body">
  <tr>
    <td class='target_class'></td>
    <td class='letter'>
      <input class="tableRowChecker" type="checkbox"> A</td>
  </tr>

  <tr>
    <td class='target_class'></td>
    <td class='letter'>
      <input class="tableRowChecker" type="checkbox"> B</td>
  </tr>
</tbody>

JS / jQuery的

$(function() {
  $('.target_class').html($('#building_block').html());
  $('button').on('click', function() {
    build_my_clone();
  });
});

function build_my_clone() {
  var letter = nextLetter($(".letter").last().text());
  $('#table-body').append("<tr><td class='target_class'></td><td class='letter'><input class='tableRowChecker' type='checkbox'>"+letter+"</td></tr>");
}

function nextLetter(s) {
  return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a) {
    var c = a.charCodeAt(0);
    switch (c) {
      case 90:
        return 'A';
      case 122:
        return 'a';
      default:
        return String.fromCharCode(++c);
    }
  });

}

CSS

.target_class {
  background: red;
  color: white;
}

https://jsfiddle.net/RodCardenas/uqdez1f2/

为给定类的每个新对象动态创建html内容

2 个答案:

HTML

JS / jQuery的

CSS