やっぱりテーブルのマップを作ってから・・・

JavaScript

rowSpanを追加した際の余分なtdの削除方法について
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2745

これは、正常には動かない。テーブルの表を最初の行から操作しないと解決しそうに無い。いちいち最初の行から走査していたら効率悪いなぁ〜

<!DOCTYPE html>
<title></title>

<style type="text/css">
table, td {
  border:1px solid;
}
</style>

<table id="HOGE">
<tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th></tr>
<tr><th>1</th><td>A-1</td><td>B-1</td><td>C-1</td><td>D-1</td><td>E-1</td><td>F-1</td></tr>
<tr><th>2</th><td>A-2</td><td>B-2</td><td>C-2</td><td>D-2</td><td>E-2</td><td>F-2</td></tr>
<tr><th>3</th><td>A-3</td><td>B-3</td><td>C-3</td><td>D-3</td><td>E-3</td><td>F-3</td></tr>
<tr><th>4</th><td>A-4</td><td>B-4</td><td>C-4</td><td>D-4</td><td>E-4</td><td>F-4</td></tr>
<tr><th>5</th><td>A-5</td><td>B-5</td><td>C-5</td><td>D-5</td><td>E-5</td><td>F-5</td></tr>
<tr><th>6</th><td>A-6</td><td>B-6</td><td>C-6</td><td>D-6</td><td>E-6</td><td>F-6</td></tr>
</table>

<script>
//@cc_on
var TABLE = document.getElementById ('HOGE');

var insideView = function (parent, target) { /*@if (1)
    return parent.contains (target) && parent != target; @else@*/
    return !! (parent.compareDocumentPosition (target) & target.DOCUMENT_POSITION_CONTAINED_BY); /*@end@*/
};


var getParent = function (node, type, val) {
  return (node)
    ? (val == node[type])
      ? node
      : arguments.callee (node.parentNode, type, val)
    : null;
};


var clickHandler = function (evt/*EventObject*/) {
  var n = evt./*@if (1) srcElement @else@*/ target /*@end@*/;
  var d = n.ownerDocument;
  var w = d./*@if (1) parentWindow @else@*/ defaultView /*@end@*/;
  var td;
  var cellIndex;
  var rowIndex;
  var target;
  var cellNo;
  var rowNo;
  var tr;
  
  if (insideView (TABLE, n)) {
    if (td = getParent (n, 'nodeName', 'TD')) {
      cellNo = td.cellIndex;
      rowNo = td.parentNode.rowIndex + td.rowSpan;
      if (tr = TABLE.rows[rowNo]) {
        if (target = tr.cells[cellNo]) {
          td.rowSpan += target.rowSpan;
          TABLE.rows[rowNo].deleteCell (cellNo);
        }
      }
    }
  }
};

document./*@if (@_jscript_version > 5.8)
  addEventListener( @elif (@_jscript_version <= 5.8)
  attachEvent( 'on'+ @else@*/
  addEventListener( /*@end@*/
    'click', clickHandler, false);

</script>

ノンリフレッシュで情報を絞り込むAjaxを改造
http://oshiete.goo.ne.jp/qa/6380778.html

質問のタイトルとは関係なく、クリックイベントを発火させる。

<!DOCTYPE html>
<title></title>

<ul>
  <li><a href="#js_cs_dp" onclick="alert(123)">Design Premium</a></li>
  <li><a href="#js_cs_ds">Design Standard</a></li>
  <li><a href="#js_cs_wp">Web Premium</a></li>
  <li><a href="#js_cs_ws">Web Standard</a></li>

  <li><a href="#js_cs_pp">Production Premium</a></li>
  <li><a href="#js_cs_mc">Master Collection</a></li>
</ul>

<script>
//@cc_on
var getAnchorByHref = function (href, parent) {
  if (! parent)
    parent = document.body;

  var as = parent.getElementsByTagName ('A');
  var cnt;
  var len = as.length;
  var a;
  
  for (cnt = 0; cnt < len; cnt++) {
    a = as[cnt];
    if (href === a.getAttribute ('href' /*@, 2@*/))
      return a;
  }
  return null;
};


var elementClicker = (function (clickEvent) {
  return function (target) {
    if (target) {
      target./*@if (1)
        fireEvent ('onclick'); @else@*/
        dispatchEvent ( clickEvent (target.ownerDocument)); //*@end
    }
  };
})(function (doc) {
     var evt = doc.createEvent ('MouseEvent');
     evt.initMouseEvent (
       'click', true, true, doc.defaultView, 1, 0, 0, 0, 0,
       false, false, false, false, 0, document.body);
     return evt;
   });

elementClicker (getAnchorByHref ('#js_cs_dp'));

</script>